/**
 * Sales Site App Store Detail — layout-only styles for widget output.
 *
 * Brand colors, fonts, and button treatment live in the active theme
 * (commerce7-block-theme/assets/css/app-store-detail.css) via --c7-app-detail-* tokens.
 *
 * Single-column flow matches DOM / screen-reader order (no reordered columns).
 */

.c7-app-store-detail {
	--c7-app-detail-gap: var(--wp--preset--spacing--large, 2rem);
	--c7-app-detail-section-gap: var(--wp--preset--spacing--small, 1rem);
	--c7-app-detail-card-radius: 0.75rem;
	--c7-app-detail-screenshot-radius: 1rem;
	--c7-app-detail-card-border: #d7d8e0;
	--c7-app-detail-muted: #64748b;
	--c7-app-detail-accent: #1378d1;
	--c7-app-detail-accent-contrast: #ffffff;
	--c7-app-detail-surface: #edf4f9;
	--c7-app-detail-link: #1378d1;
	--c7-app-detail-text: inherit;

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

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

.c7-app-store-detail__header {
	display: grid;
	gap: var(--c7-app-detail-section-gap);
	min-width: 0;
}

/*
 * Grid keeps DOM order and gives title/description full rows.
 * Flex + max-width cannot reliably force a line break (shrink fits
 * the description onto the meta row).
 */
.c7-app-store-detail__header-body {
	display: grid;
	grid-template-columns: max-content max-content minmax(0, 1fr);
	align-items: baseline;
	column-gap: 0;
	row-gap: 0.5rem;
}

.c7-app-store-detail__title,
.c7-app-store-detail__sales-description {
	grid-column: 1 / -1;
}

.c7-app-store-detail__sales-description {
	max-width: 60rem;
}

/* Meta line: developer · installs (DOM order preserved). */
.c7-app-store-detail__developer,
.c7-app-store-detail__install-count {
	margin: 0;
}

.c7-app-store-detail__developer::after {
	content: "·";
	margin-inline: 0.75rem;
	opacity: 0.65;
}

.c7-app-store-detail__title,
.c7-app-store-detail__sales-description,
.c7-app-store-detail__pricing-label,
.c7-app-store-detail__pricing-monthly,
.c7-app-store-detail__pricing-note,
.c7-app-store-detail__support-label {
	margin: 0;
}

.c7-app-store-detail__pricing {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.c7-app-store-detail__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.c7-app-store-detail__install-btn,
.c7-app-store-detail__website-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
}

.c7-app-store-detail__screenshots {
	display: grid;
	gap: var(--wp--preset--spacing--medium, 1.25rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	min-width: 0;
}

.c7-app-store-detail__screenshot {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.c7-app-store-detail__screenshot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--c7-app-detail-card-border);
	border-radius: var(--c7-app-detail-screenshot-radius);
}

.c7-app-store-detail__description {
	display: grid;
	gap: var(--wp--preset--spacing--small, 1rem);
	min-width: 0;
}

.c7-app-store-detail__description :is(p, ul, ol, blockquote, h2, h3, h4, hr) {
	margin: 0;
}

.c7-app-store-detail__description :is(ul, ol) {
	padding-left: 1.25rem;
}

.c7-app-store-detail__description li + li {
	margin-top: 0.35rem;
}

.c7-app-store-detail__description li > p {
	margin: 0;
}

.c7-app-store-detail__description hr {
	border: 0;
	border-top: 1px solid var(--c7-app-detail-card-border);
	width: 100%;
}

.c7-app-store-detail__description blockquote {
	border-left: 3px solid var(--c7-app-detail-accent);
	padding-left: var(--wp--preset--spacing--medium, 1rem);
}

.c7-app-store-detail__support {
	display: grid;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--small, 1rem) var(--wp--preset--spacing--medium, 1.25rem);
	border: 1px solid var(--c7-app-detail-card-border);
	border-radius: var(--c7-app-detail-card-radius);
	background: var(--c7-app-detail-surface);
	min-width: 0;
}

.c7-app-store-detail:not(:has(.c7-app-store-detail__inner)) {
	min-height: 12rem;
}