/* ===========================================================================
 * Vendor catalogue (homepage + Plugins listing).
 *
 * Light storefront. Product-page CSS stays on plugin-landing.php.
 * ======================================================================== */

/* --- Store hero (light) -------------------------------------------------- */

.sf-hero--store {
	padding-top: var(--sf-space-7);
	padding-bottom: var(--sf-space-8);
	background:
		radial-gradient(720px 380px at 8% -20%, rgba(15, 118, 110, .14), transparent 70%),
		radial-gradient(560px 300px at 96% 0%, rgba(34, 211, 238, .12), transparent 62%),
		var(--sf-paper);
	border-bottom: var(--sf-border);
}
.sf-hero--store .sf-h1 {
	color: var(--sf-ink);
	font-size: var(--sf-text-display-hero);
	line-height: 1.08;
	letter-spacing: -0.03em;
}
.sf-hero--store .sf-lead { max-width: 58ch; }
.sf-hero--store .sf-hero__kw {
	color: var(--sf-brand);
	background: none;
	-webkit-text-fill-color: currentColor;
	-webkit-background-clip: unset;
	background-clip: unset;
}
.sf-hero--store .sf-hero__stats {
	border-top: var(--sf-border);
}
.sf-hero--store .sf-hero__stats li {
	border-bottom: var(--sf-border);
}
.sf-hero--store .sf-hero__stat-k { color: var(--sf-brand); }
.sf-hero--store .sf-hero__stat-v { color: var(--sf-ink-2); }
@media (min-width: 600px) and (max-width: 899px) {
	.sf-hero--store .sf-hero__stats {
		border: var(--sf-border);
		background: var(--sf-surface);
		box-shadow: var(--sf-e1);
	}
	.sf-hero--store .sf-hero__stats li {
		border-inline-start: var(--sf-border);
	}
}
@media (min-width: 900px) {
	.sf-hero--store .sf-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		align-items: center;
	}
	.sf-hero--store .sf-hero__stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: var(--sf-space-6);
		padding: 0;
		border: var(--sf-border);
		border-radius: var(--sf-r-lg);
		background: var(--sf-surface);
	}
	.sf-hero--store .sf-hero__stats li {
		padding: 14px 16px;
		border-bottom: 0;
		border-inline-start: var(--sf-border);
	}
	.sf-hero--store .sf-hero__stats li:first-child { border-inline-start: 0; }
}

.sf-hero--store-page { padding-bottom: var(--sf-space-7); }
.sf-hero--store-page .sf-h1 { font-size: var(--sf-text-h1); }

/* --- Platform tiles ------------------------------------------------------ */

.sf-plat-stack {
	display: grid;
	gap: var(--sf-space-3);
	align-content: center;
}
.sf-plat-tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	background: var(--sf-surface);
	border: var(--sf-border);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e2);
	text-decoration: none;
	color: inherit;
	transition: transform .2s var(--sf-ease), box-shadow .2s var(--sf-ease), border-color .2s var(--sf-ease);
}
a.sf-plat-tile:hover,
a.sf-plat-tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--sf-e3);
	border-color: color-mix(in srgb, var(--sf-brand) 32%, var(--sf-line));
	color: inherit;
	text-decoration: none;
}
.sf-plat-tile__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: var(--sf-brand-tint);
	flex: none;
}
.sf-plat-tile--shopify .sf-plat-tile__icon {
	background: #ECFDF5;
}
.sf-plat-tile__icon .sf-pcard__mark {
	width: 52px;
	height: 52px;
	box-shadow: 0 8px 16px -10px rgba(15, 118, 110, .5);
}
.sf-plat-tile__copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}
.sf-plat-tile__k {
	font-family: var(--sf-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	color: var(--sf-ink);
}
.sf-plat-tile__v {
	color: var(--sf-ink-2);
	font-size: 0.875rem;
	line-height: 1.45;
}
.sf-plat-tile__n {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--sf-brand);
}
.sf-plat-tile__n .sf-icon { flex: none; }
a.sf-plat-tile:hover .sf-plat-tile__n .sf-icon--arrow-right { transform: translateX(2px); }

/* --- Plugin cards -------------------------------------------------------- */

.sf-pcard-grid {
	display: grid;
	gap: var(--sf-space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.sf-pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-5); }
}

.sf-pcard {
	display: grid;
	grid-template-columns: 1fr;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	background: var(--sf-surface);
	border: var(--sf-border);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-e2);
	text-decoration: none;
	color: inherit;
	transition: transform .2s var(--sf-ease), box-shadow .2s var(--sf-ease), border-color .2s var(--sf-ease);
}
@media (min-width: 720px) {
	.sf-pcard.has-media {
		grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.9fr);
		align-items: stretch;
	}
}
a.sf-pcard:hover,
a.sf-pcard:focus-visible {
	border-color: color-mix(in srgb, var(--sf-brand) 35%, var(--sf-line));
	transform: translateY(-2px);
	box-shadow: var(--sf-e3);
	color: inherit;
	text-decoration: none;
}
.sf-pcard.is-featured {
	border-color: color-mix(in srgb, var(--sf-brand) 28%, var(--sf-line));
}
.sf-pcard__main {
	display: flex;
	gap: var(--sf-space-4);
	align-items: flex-start;
	padding: var(--sf-space-5);
	min-width: 0;
}
.sf-pcard__mark {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	box-shadow: 0 8px 18px -10px rgba(15, 118, 110, .55);
}
.sf-pcard__copy { min-width: 0; flex: 1 1 auto; }
.sf-pcard__plat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.sf-pcard__plat-name {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sf-muted);
}
.sf-pcard__title {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--sf-ink);
}
.sf-pcard__tag {
	margin: 8px 0 0;
	color: var(--sf-ink-2);
	font-size: 0.975rem;
	line-height: 1.45;
	max-width: 42ch;
}
.sf-pcard__meta {
	margin: 10px 0 0;
	color: var(--sf-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
	max-width: 48ch;
}
.sf-pcard__btn {
	margin-top: var(--sf-space-4);
	pointer-events: none;
}
a.sf-pcard:hover .sf-pcard__btn {
	filter: brightness(1.05);
}
.sf-pcard__aside {
	display: flex;
	align-items: center;
	padding: var(--sf-space-5);
	background:
		radial-gradient(280px 180px at 80% 0%, rgba(15, 118, 110, .16), transparent 70%),
		linear-gradient(180deg, #F0FDFA 0%, var(--sf-paper) 100%);
	border-top: var(--sf-border);
	min-width: 0;
}
@media (min-width: 720px) {
	.sf-pcard__aside {
		border-top: 0;
		border-inline-start: var(--sf-border);
	}
}

.sf-feed-preview {
	width: 100%;
	background: var(--sf-surface);
	border: var(--sf-border);
	border-radius: 14px;
	box-shadow: var(--sf-e2);
	overflow: hidden;
}
.sf-feed-preview__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: var(--sf-grad-brand);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.sf-feed-preview__live {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.sf-feed-preview__list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}
.sf-feed-preview__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	font-size: 0.8125rem;
	color: var(--sf-ink);
	border-top: var(--sf-border);
}
.sf-feed-preview__list li:first-child { border-top: 0; }
.sf-feed-preview__list .sf-dot { margin-inline-end: 0; flex: none; }
.sf-feed-preview__name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.sf-feed-preview__list code {
	flex: none;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--sf-surface-2);
	font-family: var(--sf-font-mono);
	font-size: 0.625rem;
	color: var(--sf-ink-2);
}

.sf-pcard--coming {
	padding: var(--sf-space-5);
	background: transparent;
	border-style: dashed;
	box-shadow: none;
	color: var(--sf-ink-2);
	display: flex;
	flex-direction: column;
}
.sf-pcard--coming .sf-pcard__title { color: var(--sf-ink); }

/* --- Groups by platform -------------------------------------------------- */

.sf-plugin-groups {
	display: grid;
	gap: var(--sf-space-8);
}
.sf-plugin-group__head { max-width: 62ch; margin-bottom: var(--sf-space-5); }
.sf-plugin-group__head .sf-h3 { margin: 0; }
.sf-plugin-group__head p { margin-top: var(--sf-space-2); color: var(--sf-ink-2); }
.sf-plugin-group__empty { margin: 0; color: var(--sf-muted); }
.sf-plugin-groups__note {
	margin: 0;
	padding: var(--sf-space-4);
	border: 1px dashed var(--sf-line-strong);
	border-radius: var(--sf-r);
	color: var(--sf-muted);
	font-size: 0.9375rem;
	background: color-mix(in srgb, var(--sf-surface) 70%, transparent);
}
.sf-pcard-grid--group { grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.sf-pcard-grid--group:has(:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sf-catalog-plugins .sf-section__head { max-width: 62ch; }

/* --- How buying works ---------------------------------------------------- */

.sf-buy-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sf-space-4);
}
@media (min-width: 900px) {
	.sf-buy-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-space-5); }
}
.sf-buy-steps__item {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background: var(--sf-surface);
	border: var(--sf-border);
	border-radius: var(--sf-r-lg);
	box-shadow: var(--sf-e1);
}
.sf-buy-steps__media {
	margin: 0;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(240px 140px at 80% 0%, rgba(15, 118, 110, .14), transparent 70%),
		var(--sf-brand-tint);
	overflow: hidden;
}
.sf-buy-steps__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.sf-buy-steps__copy { padding: var(--sf-space-5); }
.sf-buy-steps__t {
	margin: 0;
	font-size: 1.0625rem;
	letter-spacing: -0.015em;
}
.sf-buy-steps__item p {
	margin: var(--sf-space-2) 0 0;
	color: var(--sf-ink-2);
	font-size: 0.9375rem;
}

/* --- Reasons ------------------------------------------------------------- */

.sf-reasons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sf-space-4);
}
@media (min-width: 600px) {
	.sf-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.sf-reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-space-5); }
}
.sf-reasons__item {
	padding: var(--sf-space-5);
	background: var(--sf-surface);
	border: var(--sf-border);
	border-radius: var(--sf-r-lg);
}
.sf-reasons__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--sf-space-3);
	border-radius: 12px;
	background: var(--sf-brand-tint);
	color: var(--sf-brand);
}
.sf-reasons__t {
	margin: 0;
	font-size: 1.0625rem;
	letter-spacing: -0.015em;
}
.sf-reasons__item p {
	margin: var(--sf-space-2) 0 0;
	color: var(--sf-ink-2);
	font-size: 0.9375rem;
}

/* Skip layout work for below-fold catalogue blocks. */
.sf-catalog-buy,
.sf-catalog-reasons,
.sf-is-store .sf-faq-section {
	content-visibility: auto;
	contain-intrinsic-size: 1px 780px;
}

@media (prefers-reduced-motion: reduce) {
	.sf-pcard,
	.sf-plat-tile { transition: none; }
	a.sf-pcard:hover,
	a.sf-plat-tile:hover { transform: none; }
}