/* /products only (WS92, 2026-10-11): loaded after hub.css by CmsmartViewHub::addAssets for layout=products and
 * scoped to .cm-hub--products, so the other hub pages and the shared mega-menu rules are untouched.
 * One card system (luxury.css .lx-card: radius --lx-radius-sm, --shadow-lx-1, body --sp-24, title --fs-18,
 * text --fs-15, media 16:10, "Learn more ->" in navy), one section rhythm (--sp-section-tight), one page
 * background, and a fixed gap between a card grid and its CTA row. Tokens only (templates/cmsmart/css/tokens.css). */

/* ---- one background, one rhythm ---- */
.cm-hub--products { background: var(--color-section); }
.cm-hub--products .cm-hub__section,
.cm-hub--products .cm-hub__section--alt { padding-block: var(--sp-section-tight); background: transparent; }
.cm-hub--products .cm-prod-sec,
.cm-hub--products .cm-prod-anchor,
.cm-hub--products .cm-prod-dev,
.cm-hub--products .cm-prod-cta { scroll-margin-top: var(--sticky-top-offset); }
.cm-hub--products .lx-head { margin-bottom: var(--lx-head-gap); }
.cm-hub--products .lx-head h2 { text-wrap: balance; }

/* ---- on-this-page chips (44px tap targets on phones) ---- */
.cm-hub--products .cm-prod-toc .cm-hub__chips { justify-content: center; padding-top: var(--sp-24); }
.cm-hub--products .cm-hub__chips a {
	display: inline-flex; align-items: center; min-height: var(--lx-chip-sm);
	padding-inline: var(--sp-16); border-color: var(--c-lx-line); color: var(--c-navy-500);
}
.cm-hub--products .cm-hub__chips a:hover { border-color: var(--c-navy-500); background: var(--c-surface-0); }

/* ---- card grids ---- */
.cm-hub--products .cm-prod-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lx-grid-gap); grid-template-columns: minmax(0, 1fr); }
.cm-hub--products .cm-prod-grid > li { display: flex; min-width: 0; }
.cm-hub--products .cm-prod-grid > li > .lx-card { width: 100%; }
@media (min-width: 640px) {
	.cm-hub--products .cm-prod-grid--2,
	.cm-hub--products .cm-prod-grid--3,
	.cm-hub--products .cm-prod-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.cm-hub--products .cm-prod-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.cm-hub--products .cm-prod-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- the card (plans, AI tools, coming-soon stores; store cards below use the same values) ---- */
.cm-hub--products .cm-prod-card__media { aspect-ratio: 16 / 10; border-bottom: var(--bw-1) solid var(--c-lx-line); }
.cm-hub--products .cm-prod-card__media img { object-position: top left; }
.cm-hub--products .cm-prod-card .lx-card__body,
.cm-hub--products .cm-prod-soon .lx-card__body { gap: var(--sp-8); padding: var(--sp-24); }
.cm-hub--products .lx-card__title { font-size: var(--fs-18); }
.cm-hub--products .lx-card__text { font-size: var(--fs-15); }
.cm-hub--products .lx-card__more,
.cm-hub--products .cm-hub-stores__body .cm-hub-stores__more {
	margin-top: auto; padding-top: var(--sp-8); font-size: var(--fs-15); font-weight: var(--fw-semibold);
	color: var(--c-navy-500); text-decoration: none;
}
.cm-hub--products a.lx-card:hover .lx-card__more,
.cm-hub--products .cm-hub-stores__card:hover .cm-hub-stores__more,
.cm-hub--products a.lx-card__more:hover { color: var(--c-brand-700); }
.cm-hub--products a.lx-card:focus-visible,
.cm-hub--products .cm-hub-stores__card:focus-visible,
.cm-hub--products .cm-prod-chips a:focus-visible,
.cm-hub--products .cm-hub__chips a:focus-visible,
.cm-hub--products .cm-prod-more > summary:focus-visible,
.cm-hub--products a.lx-card__more:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-lx-2); }
.cm-hub--products .cm-prod-price { font-size: var(--fs-14); color: var(--c-ink-500); }
.cm-hub--products .cm-prod-price b { font-family: var(--font-heading); font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-hub--products .cm-prod-badge {
	align-self: flex-start; padding: var(--sp-2) var(--sp-10); border-radius: var(--r-pill);
	font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: var(--lh-body);
	background: var(--c-brand-50); color: var(--c-brand-800);
}
/* coming-soon store: a row card that is not a link (no download until the store is released) */
.cm-hub--products .cm-prod-soon { flex-direction: row; }
.cm-hub--products .cm-prod-soon .lx-card__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: var(--bw-1) solid var(--c-lx-line); }
@media (max-width: 560px) {
	.cm-hub--products .cm-prod-soon { flex-direction: column; }
	.cm-hub--products .cm-prod-soon .lx-card__media { flex-basis: auto; aspect-ratio: 16 / 10; min-height: 0; border-right: 0; border-bottom: var(--bw-1) solid var(--c-lx-line); }
	/* Product modules on phones: the seven cards after the first become compact rows (capture left, text right),
	   and the repeated "Product Designer module" label is dropped, so the block is not eight full cards long. */
	.cm-hub--products .cm-hub-modules .lx-card--row,
	.cm-hub--products .cm-hub-modules__small { flex-direction: row; }
	.cm-hub--products .cm-hub-modules .lx-card--row .lx-card__media,
	.cm-hub--products .cm-hub-modules__small .lx-card__media { position: relative; flex: 0 0 36%; aspect-ratio: auto; min-height: calc(var(--sp-96) + var(--sp-24)); }
	.cm-hub--products .cm-hub-modules .lx-card--row .lx-card__media img,
	.cm-hub--products .cm-hub-modules__small .lx-card__media img { position: absolute; inset: 0; }
	.cm-hub--products .cm-hub-modules .lx-card--row .lx-card__body,
	.cm-hub--products .cm-hub-modules__small .lx-card__body { gap: var(--sp-4); padding: var(--sp-16); }
	.cm-hub--products .cm-hub-modules .lx-card--row .lx-card__eyebrow,
	.cm-hub--products .cm-hub-modules__small .lx-card__eyebrow { display: none; }
	.cm-hub--products .cm-hub-modules .lx-card--row .lx-card__text,
	.cm-hub--products .cm-hub-modules__small .lx-card__text { font-size: var(--fs-14); }
}

/* store cards: same border, radius, shadow and text sizes as .lx-card */
.cm-hub--products .cm-hub-stores { margin: 0; }
.cm-hub--products .cm-hub-stores__card { border: var(--bw-1) solid var(--c-lx-line); }
.cm-hub--products .cm-hub-stores__body { gap: var(--sp-8); padding: var(--sp-24); }
.cm-hub--products .cm-hub-stores__body b { font-family: var(--font-heading); font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.cm-hub--products .cm-hub-stores__body span { color: var(--c-ink-500); }

/* ---- grid -> CTA row: one fixed gap, never stuck to the cards ---- */
.cm-hub--products .cm-prod-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-12); margin-top: var(--sp-40); }
.cm-hub--products .cm-prod-actions .cm-btn { text-align: center; }
.cm-hub--products .cm-prod-note { max-width: var(--lx-lede-measure); margin: var(--sp-20) auto 0; text-align: center; font-size: var(--fs-15); color: var(--c-ink-500); }

/* ---- "show all" disclosure (stores 4-6, more demos, comparison) ---- */
.cm-hub--products .cm-prod-more { margin-top: var(--lx-grid-gap); }
.cm-hub--products .cm-prod-more > summary {
	display: flex; align-items: center; justify-content: center; gap: var(--sp-8);
	width: max-content; max-width: 100%; min-height: var(--lx-chip); margin-inline: auto; padding-inline: var(--sp-20);
	border: var(--bw-1) solid var(--c-lx-line); border-radius: var(--r-pill); background: var(--c-surface-0); box-shadow: var(--shadow-lx-1);
	font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--c-navy-500); cursor: pointer; list-style: none;
}
.cm-hub--products .cm-prod-more > summary::-webkit-details-marker { display: none; }
.cm-hub--products .cm-prod-more > summary::after { content: "+"; font-size: var(--fs-18); line-height: var(--lh-tight, 1); }
.cm-hub--products .cm-prod-more[open] > summary::after { content: "\2212"; }
.cm-hub--products .cm-prod-more[open] > summary { margin-bottom: var(--lx-grid-gap); }
.cm-hub--products .cm-prod-compare { margin-top: var(--sp-40); }

/* ---- link chips (store services, AI links) ---- */
.cm-hub--products .cm-prod-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); margin: var(--sp-24) 0 0; padding: 0; }
.cm-hub--products .cm-prod-chips a {
	display: inline-flex; align-items: center; min-height: var(--lx-chip); padding-inline: var(--sp-16);
	border: var(--bw-1) solid var(--c-lx-line); border-radius: var(--r-pill); background: var(--c-surface-0);
	font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-navy-500); text-decoration: none;
	transition: border-color var(--lx-dur-hover) var(--lx-ease), color var(--lx-dur-hover) var(--lx-ease);
}
.cm-hub--products .cm-prod-chips a:hover { border-color: var(--c-navy-500); color: var(--c-navy-900); }
.cm-hub--products .cm-prod-svc {
	margin-top: var(--sp-40); padding: var(--sp-24); text-align: center;
	background: var(--c-surface-0); border: var(--bw-1) solid var(--c-lx-line); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1);
}
.cm-hub--products .cm-prod-svc__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-hub--products .cm-prod-svc .cm-prod-chips { margin-top: var(--sp-16); }
.cm-hub--products .cm-prod-svc .cm-prod-chips a { background: var(--color-section); }

/* ---- plugin spotlight: capture beside the benefits, one heading scale ---- */
.cm-hub--products .cm-prod-h3 { margin: var(--sp-48) 0 var(--sp-20); font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--c-navy-900); }
.cm-hub--products .cm-prod-h3--center { margin-top: var(--sp-48); text-align: center; }
.cm-hub--products .cm-hub__spot-head { margin-bottom: var(--sp-48); }
.cm-hub--products .cm-prod-split { display: grid; gap: var(--sp-32); align-items: center; padding-top: var(--sp-48); border-top: var(--bw-1) solid var(--c-lx-line); }
.cm-hub--products .cm-prod-split .cm-prod-h3 { margin-top: 0; }
@media (min-width: 960px) {
	.cm-hub--products .cm-prod-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--lx-split-gap); }
}
.cm-hub--products .cm-prod-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-20); counter-reset: ben; }
.cm-hub--products .cm-prod-benefits li { position: relative; padding-left: calc(var(--sp-32) + var(--sp-16)); counter-increment: ben; }
.cm-hub--products .cm-prod-benefits li::before {
	content: counter(ben); position: absolute; left: 0; top: 0; display: grid; place-items: center;
	width: var(--sp-32); height: var(--sp-32); border-radius: var(--r-circle);
	background: var(--c-navy-500); color: var(--c-surface-0); font-size: var(--fs-14); font-weight: var(--fw-bold);
}
.cm-hub--products .cm-prod-benefits h4 { margin: 0 0 var(--sp-4); font-family: var(--font-heading); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-hub--products .cm-prod-benefits p { margin: 0; font-size: var(--fs-15); color: var(--c-ink-500); }
.cm-hub--products .cm-prod-two { margin-bottom: 0; }
.cm-hub--products .cm-prod-panel,
.cm-hub--products .cm-prod-dev { border: var(--bw-1) solid var(--c-lx-line); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); background: var(--c-surface-0); }
.cm-hub--products .cm-hub__video-frame { border-radius: var(--lx-radius-sm); }
.cm-hub--products .cm-prod-gallery img { border-radius: var(--lx-radius-sm); }
.cm-hub--products .cm-prod-faq { max-width: var(--lx-head-max); }

/* ---- in-development lines (flag off): same card values, no coloured top rule ---- */
.cm-hub--products .cm-prod-dev { border-top: var(--bw-1) solid var(--c-lx-line); }
.cm-hub--products .cm-prod-dev .cm-hub__product-thumb { border-radius: var(--lx-radius-sm) var(--lx-radius-sm) 0 0; }
@media (min-width: 768px) {
	.cm-hub--products .cm-hub__products.cm-prod-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cm-hub--products .cm-prod-sr { position: absolute; width: var(--bw-1); height: var(--bw-1); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- closing inset card: Get started + next steps ---- */
.cm-hub--products .cm-prod-cta .cm-hub__eyebrow { color: var(--c-accent-200); }
.cm-hub--products .cm-prod-next {
	list-style: none; display: grid; gap: var(--sp-20); grid-template-columns: minmax(0, 1fr);
	margin: var(--sp-32) 0 0; padding: var(--sp-24) 0 0; border-top: var(--bw-1) solid var(--c-navy-400); text-align: left;
}
@media (min-width: 640px) { .cm-hub--products .cm-prod-next { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cm-hub--products .cm-prod-next { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cm-hub--products .cm-prod-next li { display: flex; flex-direction: column; gap: var(--sp-4); }
.cm-hub--products .cm-prod-next a { color: var(--c-surface-0); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: var(--sp-4); }
.cm-hub--products .cm-prod-next a:hover { color: var(--c-accent-100); }
.cm-hub--products .cm-prod-next a:focus-visible { outline: var(--bw-2) solid var(--c-accent-200); outline-offset: var(--sp-2); }
.cm-hub--products .cm-prod-next span { font-size: var(--fs-14); color: var(--c-accent-100); }

@media (max-width: 640px) {
	.cm-hub--products .cm-hub__chips a { min-height: var(--lx-chip); }
	.cm-hub--products .cm-prod-actions .cm-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-hub--products .cm-prod-chips a { transition: none; }
}