/**
 * Sales Site App Store — default layout styles for widget output.
 *
 * Targets the markup generated by salessite-widgets.js inside .c7-app-store.
 * Brand colors and typography are refined in the active theme (commerce7-block-theme).
 */

.c7-app-store {
	--c7-app-store-gap: 1.5rem;
	--c7-app-store-filter-gap: 0.75rem;
	--c7-app-store-grid-gap: 1.25rem;
	--c7-app-store-card-bg: #ffffff;
	--c7-app-store-card-border: #e2e8f0;
	--c7-app-store-card-radius: 0.75rem;
	--c7-app-store-card-shadow: 0 1px 2px rgb(15 23 42 / 6%);
	--c7-app-store-card-shadow-hover: 0 8px 24px rgb(15 23 42 / 8%);
	--c7-app-store-text: #0f172a;
	--c7-app-store-muted: #64748b;
	--c7-app-store-accent: #2563eb;
	--c7-app-store-input-bg: #ffffff;
	--c7-app-store-input-border: #cbd5e1;
	--c7-app-store-logo-bg: #f8fafc;
	--c7-app-store-logo-size: 4.5rem;
	--c7-app-store-pagination-size: 2.25rem;

	color: var(--c7-app-store-text);
	width: 100%;
}

.c7-app-store__inner {
	display: grid;
	gap: var(--c7-app-store-gap);
}

.c7-app-store__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--c7-app-store-filter-gap);
}

.c7-app-store__search,
.c7-app-store__filter-select {
	appearance: none;
	background: var(--c7-app-store-input-bg);
	border: 1px solid var(--c7-app-store-input-border);
	border-radius: 0.5rem;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
}

.c7-app-store__search {
	flex: 1 1 16rem;
	min-width: min(100%, 16rem);
}

.c7-app-store__filter-select {
	flex: 0 1 12rem;
	min-width: min(100%, 12rem);
}

.c7-app-store__grid {
	display: grid;
	gap: var(--c7-app-store-grid-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.c7-app-store__app {
	display: flex;
	min-width: 0;
}

.c7-app-store__app-link {
	background: var(--c7-app-store-card-bg);
	border: 1px solid var(--c7-app-store-card-border);
	border-radius: var(--c7-app-store-card-radius);
	box-shadow: var(--c7-app-store-card-shadow);
	color: inherit;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	padding: 1rem;
	text-decoration: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.c7-app-store__app-link:hover,
.c7-app-store__app-link:focus-visible {
	border-color: color-mix(in srgb, var(--c7-app-store-accent) 35%, var(--c7-app-store-card-border));
	box-shadow: var(--c7-app-store-card-shadow-hover);
	outline: none;
	transform: translateY(-1px);
}

.c7-app-store__app-logo {
	align-items: center;
	background: var(--c7-app-store-logo-bg);
	border-radius: 0.5rem;
	display: flex;
	flex-shrink: 0;
	height: var(--c7-app-store-logo-size);
	justify-content: center;
	overflow: hidden;
	width: var(--c7-app-store-logo-size);
}

.c7-app-store__app-logo img {
	display: block;
	height: auto;
	max-height: calc(var(--c7-app-store-logo-size) - 1rem);
	max-width: calc(var(--c7-app-store-logo-size) - 1rem);
	object-fit: contain;
	width: auto;
}

.c7-app-store__app-body {
	display: grid;
	flex: 1 1 auto;
	gap: 0.35rem;
	min-width: 0;
}

.c7-app-store__app-title {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.c7-app-store__app-developer,
.c7-app-store__app-install-count {
	color: var(--c7-app-store-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.c7-app-store__app-description {
	color: var(--c7-app-store-muted);
	display: -webkit-box;
	font-size: 0.9375rem;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	line-height: 1.5;
	margin-top: 0.25rem;
	overflow: hidden;
}

.c7-app-store__pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.c7-app-store__pagination-button {
	align-items: center;
	background: var(--c7-app-store-input-bg);
	border: 1px solid var(--c7-app-store-input-border);
	border-radius: 0.5rem;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	justify-content: center;
	min-height: var(--c7-app-store-pagination-size);
	min-width: var(--c7-app-store-pagination-size);
	padding: 0.35rem 0.75rem;
}

.c7-app-store__pagination-button:hover:not(:disabled) {
	border-color: var(--c7-app-store-accent);
	color: var(--c7-app-store-accent);
}

.c7-app-store__pagination-button[aria-current='page'] {
	background: var(--c7-app-store-accent);
	border-color: var(--c7-app-store-accent);
	color: #ffffff;
}

.c7-app-store__pagination-button:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

/* Reserve space while the widget hydrates an empty mount node. */
.c7-app-store:not(:has(.c7-app-store__inner)) {
	min-height: 12rem;
}

@media (min-width: 48rem) {
	.c7-app-store__app-link {
		flex-direction: row;
	}

	.c7-app-store__app-body {
		align-content: start;
	}
}