/**
 * Reusable UI components: buttons, badges, icon chips, cards, forms,
 * pricing cards. Loaded on every page (unlike home.css/pages.css, which
 * are conditional on is_front_page()) — so anything used in more than
 * one template context belongs here, not in one of those two.
 */

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	border: 1px solid transparent;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
	white-space: nowrap;
}

.btn:hover {
	text-decoration: none;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn-primary:hover {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.btn-secondary {
	background: var(--color-white);
	color: var(--color-neutral-900);
	border-color: var(--color-border);
}

.btn-secondary:hover {
	border-color: var(--color-neutral-400);
	color: var(--color-neutral-900);
}

.btn-outline-inverse {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-inverse:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
}

.btn-link {
	background: transparent;
	color: var(--color-neutral-800);
	padding-inline: var(--space-2);
}

.btn-link:hover {
	color: var(--color-primary);
}

.btn-block {
	display: flex;
	width: 100%;
}

.btn-sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-xs);
}

/* ---------- Badges ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.badge-primary {
	background: var(--color-primary-50);
	color: var(--color-primary-dark);
}

.badge-dark {
	background: var(--color-navy-900);
	color: var(--color-white);
}

/* ---------- Feature chips (hero) ---------- */

.chip-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin: var(--space-8) auto;
	max-width: fit-content;
	text-align: left;
}

.chip {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.chip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background: var(--color-primary-50);
	color: var(--color-primary);
	flex-shrink: 0;
}

.chip__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-900);
}

/* ---------- Icon tile (trust bar) ---------- */

.icon-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

.icon-tile {
	--tile-color: var(--color-primary);
}

.icon-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--tile-color) 14%, white);
	color: var(--tile-color);
	flex-shrink: 0;
}

.icon-tile__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	margin: 0;
}

/* ---------- Trust bar (moved here from home.css 2026-09-07 — used by
   the homepage AND the About page, but this file was front-page-only,
   so the About page's 4 icons had zero layout CSS and rendered stacked
   on top of each other instead of in a row. Same "shared markup styled
   in a page-conditional file" mistake this project has hit before;
   components.css loads on every page, so this fixes it at the root
   instead of duplicating the rule per page.) ---------- */

.trust-bar {
	background: var(--color-bg-subtle);
}

.trust-bar__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.trust-bar__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.trust-bar__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Card base ---------- */

.card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* ---------- Forms ---------- */

.form-field {
	margin-bottom: var(--space-4);
}

.form-field label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-900);
	margin-bottom: var(--space-2);
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-text);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-50);
}

@media (min-width: 1024px) {
	.chip-list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}
}

/**
 * ---------- Pricing cards ----------
 * Lives here (not home.css) because appiappi_render_pricing_cards() is
 * shared between the homepage teaser AND the dedicated /pricing/ page —
 * home.css is only enqueued on is_front_page(), so any of this in that
 * file would silently vanish on the Pricing page. See DEVELOPMENT_LOG.md.
 */

.pricing-grid {
	--cols: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--space-6);
}

.pricing-card {
	--plan-color: var(--color-primary);
	width: calc((100% - (var(--cols) - 1) * var(--space-6)) / var(--cols));
	display: flex;
	flex-direction: column;
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: var(--color-white);
	position: relative;
	scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.pricing-card--featured {
	border-color: var(--plan-color);
	box-shadow: var(--shadow-lg);
}

/* ---------- Pricing tabs (full Pricing page, added 2026-09-07) ---------- */
/* One tab per plan instead of stacking every plan in a group — shown
   only when appiappi_render_pricing_cards() is called with $as_tabs.
   Progressive enhancement: every .pricing-tabs__panel (= .pricing-card)
   is fully present and visible in the raw HTML; main.js adds
   .is-ready to .pricing-tabs once it has picked the initial tab, and
   ONLY THEN does this CSS hide the non-active panels — so a visitor
   (or a crawler) with JS disabled/broken still sees every plan,
   stacked, instead of a blank or broken page. */
.pricing-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-border);
}

.pricing-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border: none;
	background: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
	cursor: pointer;
}

.pricing-tabs__tab svg {
	width: 20px;
	height: 20px;
	color: var(--plan-color, currentColor);
	flex-shrink: 0;
}

.pricing-tabs__tab-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

.pricing-tabs__tab-period {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.pricing-tabs__tab:hover {
	color: var(--color-neutral-900);
}

.pricing-tabs__tab.is-active {
	color: var(--plan-color, var(--color-primary));
	border-bottom-color: var(--plan-color, var(--color-primary));
}

.pricing-tabs__tab.is-active .pricing-tabs__tab-period {
	color: inherit;
	opacity: 0.75;
}

/* Marks a billing-group boundary when multiple groups share one tab
   bar (e.g. one-time Launch plans + monthly Growth plans merged into
   one row, 2026-09-07) — inserted only where the group actually
   changes, so it disappears on its own if a page ever shows just one
   group again. */
.pricing-tabs__divider {
	width: 1px;
	flex-shrink: 0;
	align-self: stretch;
	background: var(--color-border);
	margin-inline: var(--space-1);
}

/* The Growth-tier plans are the real conversion goal once merged into
   the same bar as Launch — a persistent tint (not just on hover/active)
   so they read as the recommended path at a glance, distinct from
   which single plan carries the separate, admin-set "Most Popular"
   badge (.pricing-card__badge). */
.pricing-tabs__tab--highlight {
	background: color-mix(in srgb, var(--plan-color, var(--color-primary)) 10%, transparent);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.pricing-tabs__tab--highlight:hover {
	background: color-mix(in srgb, var(--plan-color, var(--color-primary)) 16%, transparent);
}

.pricing-tabs__tab--highlight.is-active {
	background: color-mix(in srgb, var(--plan-color, var(--color-primary)) 18%, transparent);
}

.pricing-tabs.is-ready .pricing-tabs__panel {
	display: none;
}

.pricing-tabs.is-ready .pricing-tabs__panel.is-active {
	display: flex;
}

@media (max-width: 639.98px) {
	.pricing-tabs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.pricing-tabs__tab {
		flex-shrink: 0;
	}
}

.pricing-card__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--plan-color);
	color: var(--color-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.pricing-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--plan-color) 14%, white);
	color: var(--plan-color);
	margin-bottom: var(--space-4);
}

.pricing-card__name {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-1);
}

.pricing-card__tagline {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--plan-color);
	margin-bottom: 0;
}

.pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
	color: var(--plan-color);
	margin: var(--space-2) 0 var(--space-1);
}

.pricing-card__price-amount {
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
}

.pricing-card__price-period {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.pricing-card__note {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.pricing-card__audience {
	font-size: var(--fs-xs);
	font-style: italic;
	color: var(--color-neutral-600);
	margin-bottom: var(--space-6);
}

.pricing-card__description {
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
	line-height: var(--lh-normal);
	margin-bottom: var(--space-6);
	padding: var(--space-5);
	background: color-mix(in srgb, var(--plan-color) 8%, white);
	border: 1px solid color-mix(in srgb, var(--plan-color) 22%, white);
	border-radius: var(--radius-lg);
}

.pricing-card__description p:last-child {
	margin-bottom: 0;
}

.pricing-card__description-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--plan-color);
	margin-bottom: var(--space-2);
}

.pricing-card__features {
	flex: 1;
	margin-bottom: var(--space-6);
}

.pricing-card__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
	padding-block: var(--space-2);
	border-top: 1px solid var(--color-border);
}

.pricing-card__features li:first-child {
	border-top: none;
}

.pricing-card__features svg {
	flex-shrink: 0;
	color: var(--plan-color);
	margin-top: 2px;
}

.pricing-card__feature-name {
	display: block;
}

.pricing-card__feature-desc {
	display: block;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-top: 2px;
}

.pricing-card__value-driver {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--color-neutral-800);
	background: color-mix(in srgb, var(--plan-color) 10%, white);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-5);
}

.pricing-card__value-driver svg {
	flex-shrink: 0;
	color: var(--plan-color);
	margin-top: 1px;
}

.pricing-card .btn {
	border-color: var(--plan-color);
}

.pricing-card .btn-primary {
	background: var(--plan-color);
}

.pricing-card .btn-secondary {
	color: var(--plan-color);
}

@media (min-width: 640px) {
	.pricing-grid {
		/* Tablet always caps at 2 regardless of the admin's desktop setting —
		   these cards are too content-heavy to comfortably fit 3+ at this width. */
		--cols: min(var(--pricing-cols, 4), 2);
	}
}

@media (min-width: 1024px) {
	.pricing-grid {
		--cols: var(--pricing-cols, 4);
	}

	.pricing-card--featured {
		transform: translateY(-var(--space-4));
	}
}

/* ---------- Template showcase (homepage preview + /templates/ page) ---------- */

.templates-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

/* Holds the search/categories/price card and, since 2026-09-07, the
   shared Account card below it (appiappi_client_login_render_sidebar_account_box(),
   appended in appiappi_render_template_showcase()) — flex column so
   the two stack with a consistent gap instead of touching. */
.templates-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.templates-sidebar__card {
	padding: var(--space-6);
}

.templates-sidebar__search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	margin-bottom: var(--space-6);
	color: var(--color-text-muted);
}

.templates-sidebar__search input {
	border: none;
	outline: none;
	flex: 1;
	font-size: var(--fs-sm);
	background: transparent;
	color: var(--color-text);
}

.templates-sidebar__group {
	margin-bottom: var(--space-6);
}

.templates-sidebar__group:last-child {
	margin-bottom: 0;
}

.templates-sidebar__title {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.templates-sidebar__categories li {
	margin-bottom: var(--space-1);
}

.templates-sidebar__categories a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	color: var(--color-neutral-800);
}

.templates-sidebar__categories a span:first-of-type {
	flex: 1 1 auto;
}

/* Design-count badge, added 2026-09-12 next to each category/sub-category
   label — see appiappi_showcase_get_category_counts(). */
.templates-sidebar__count {
	flex-shrink: 0;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-full, 999px);
	padding: 1px var(--space-2);
	line-height: 1.6;
}

.templates-sidebar__categories li.is-active .templates-sidebar__count {
	color: var(--color-primary-dark);
	background: #fff;
}

.templates-sidebar__categories a:hover {
	background: var(--color-bg-subtle);
	text-decoration: none;
}

.templates-sidebar__categories svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.templates-sidebar__categories li.is-active a {
	background: var(--color-primary-50);
	color: var(--color-primary-dark);
	font-weight: var(--fw-semibold);
}

.templates-sidebar__categories li.is-active svg {
	color: var(--color-primary);
}

/* Sub-categories (e.g. Corporate > Business, added 2026-09-11) — indented
   directly under their parent's link, slightly smaller so the hierarchy
   reads clearly without needing an expand/collapse toggle. */
.templates-sidebar__categories--children {
	margin: var(--space-1) 0 var(--space-2) var(--space-5);
}

.templates-sidebar__categories--children a {
	padding: var(--space-1) var(--space-3);
	font-size: var(--fs-xs);
}

.templates-sidebar__categories--children svg {
	width: 15px;
	height: 15px;
}

/* Expand/collapse caret, added 2026-09-12 — a branch's children only
   render in the markup when it's on the active category's path
   (appiappi_showcase_get_categories()'s 'expanded' flag), so the caret
   just hints there's more underneath; clicking the link itself (making
   that term active) is what reveals it on the next page load. */
.templates-sidebar__caret {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--color-text-muted);
	transition: transform 0.15s ease;
}

.templates-sidebar__caret svg {
	width: 14px;
	height: 14px;
}

.templates-sidebar__categories li.is-expanded > a > .templates-sidebar__caret {
	transform: rotate(90deg);
}

/* ---------- Sitewide left sidebar (Categories + Account) ---------- */
/* Added 2026-09-07: appiappi_render_page_sidebar() (inc/template-tags.php)
   on every page except the homepage. Mobile/tablet: the Categories card
   sits in normal document flow directly after the page header (title +
   subtitle) — .page-sidebar is simply the first child of .page-layout
   in markup, so no extra CSS is needed for that placement. The Account
   card is hidden below 1024px entirely (revised 2026-09-07) — the
   header already has its own profile icon there (appiappi-client-login's
   header widget), so repeating it in the sidebar was judged redundant.
   Desktop (≥1024px, same breakpoint as .templates-layout above): a
   280px left column; only .page-sidebar__account (not Categories) is
   pinned via position: sticky, per explicit request — Categories
   scrolls away normally, then Account "catches" and stays in view once
   it reaches the sticky offset. */
.page-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

.page-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.page-sidebar__card {
	padding: var(--space-6);
}

.page-sidebar__account {
	display: none;
}

@media (min-width: 1024px) {
	.page-layout {
		grid-template-columns: 280px 1fr;
		align-items: start;
	}

	.page-sidebar__account {
		display: block;
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
	}
}

/* ---------- Price range filter (sidebar) ---------- */

.templates-price-filter__row {
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.templates-price-filter__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	flex: 1;
	min-width: 0;
}

.templates-price-filter__field input {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text);
}

.templates-price-filter__hint {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

/* Category breadcrumb above the toolbar, shown only when a category
   filter is active — see appiappi_showcase_get_breadcrumb(). */
.templates-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1, 4px);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.templates-breadcrumb__link {
	color: var(--color-text-muted);
	text-decoration: none;
}

.templates-breadcrumb__link:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.templates-breadcrumb__current {
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

.templates-breadcrumb__sep {
	color: var(--color-border);
}

/* Pagination now renders inside .templates-main itself (right after the
   design grid), instead of below the whole sidebar+main layout — with a
   long sidebar (19+ categories) that flex row is taller than the grid,
   which used to push the page-number links far below the actual
   designs. See appiappi_render_template_showcase(). */
.templates-main__pagination {
	margin-top: var(--space-6);
}

.templates-main__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: var(--space-5);
	gap: var(--space-3);
}

.templates-main__count {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin: 0;
}

.templates-main__count-total {
	color: var(--color-text-muted);
	font-weight: normal;
}

/* ---------- Sort controls (toolbar) ---------- */

.templates-main__sort {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

.templates-sort-form select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-sm);
	color: var(--color-text);
	background: var(--color-white);
}

/* Flexbox (not CSS Grid) so a short last row centres on the page instead
   of leaving a lopsided gap on the right — same reasoning as .pricing-grid. */
.template-grid {
	--cols: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);
}

.template-card {
	width: calc((100% - (var(--cols) - 1) * var(--space-6)) / var(--cols));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Exact aspect ratio of the source marketplace preview images
   (590×300 — confirmed across every downloaded design so far) so
   object-fit: cover never actually crops anything, while every card's
   media box still comes out the same height for a tidy, uniform grid
   regardless of the source image's exact pixel size. */
.template-card__media {
	position: relative;
	aspect-ratio: 590 / 300;
	background: var(--color-neutral-100);
	overflow: hidden;
}

.template-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 300ms ease;
}

.template-card__image.is-active {
	opacity: 1;
}

.template-card__category {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
}

/* Carousel prev/next — only rendered at all when a design has more
   than one image (gallery, in addition to the Featured Image). */
.template-card__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	border: none;
	background: rgba(16, 21, 29, 0.55);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 150ms ease, background 150ms ease;
}

.template-card__nav svg {
	width: 16px;
	height: 16px;
}

.template-card__media:hover .template-card__nav {
	opacity: 1;
}

.template-card__nav:hover {
	background: rgba(16, 21, 29, 0.8);
}

.template-card__nav--prev {
	left: var(--space-2);
}

.template-card__nav--next {
	right: var(--space-2);
}

.template-card__body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1;
}

.template-card__name {
	font-size: var(--fs-lg);
	margin-bottom: 0;
}

.template-card__name a {
	color: inherit;
	text-decoration: none;
}

.template-card__name a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.template-card__group {
	font-size: var(--fs-xs);
	font-style: italic;
	color: var(--color-text-muted);
	margin: 0;
}

.template-card__subgroup {
	margin-left: var(--space-1);
}

.template-card__desc {
	font-size: var(--fs-sm);
	margin-bottom: var(--space-3);
}

.template-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--fs-sm);
	margin-bottom: var(--space-4);
}

.template-card__price {
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
}

.template-card__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text-muted);
}

.template-card__rating-count {
	color: var(--color-text-muted);
}

/* Standard gold star rating (appiappi_render_star_rating()) — filled
   count reflects the real numeric rating instead of always showing 5
   gold stars regardless of the value. */
.star-rating {
	display: inline-flex;
	line-height: 1;
	letter-spacing: 1px;
}

.star-rating__star {
	color: var(--color-neutral-300);
}

.star-rating__star--filled {
	color: var(--color-warning);
}

.template-card__actions {
	display: flex;
	gap: var(--space-2);
	margin-top: auto;
}

.template-card__actions .btn:not(.template-card__cart) {
	flex: 1;
}

/* The "Add to Cart" (Choose This Design) button: square, icon-only,
   sitting beside the two equal-width text buttons. aspect-ratio: 1
   (rather than a guessed fixed px size) combined with the row's
   default align-items: stretch means it's always exactly as tall —
   and therefore exactly as wide — as its two sibling buttons. */
.template-card__cart {
	flex: 0 0 auto;
	aspect-ratio: 1;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.template-card__cart svg {
	width: 18px;
	height: 18px;
}

.templates-empty-state {
	text-align: center;
	color: var(--color-text-muted);
	padding-block: var(--space-10);
}

.templates-preview__footer {
	text-align: center;
	margin-top: var(--space-10);
}

@media (min-width: 640px) {
	.template-grid {
		--cols: 2;
	}
}

@media (min-width: 1024px) {
	.templates-layout {
		grid-template-columns: 280px 1fr;
		align-items: start;
	}

	.templates-layout--no-sidebar {
		grid-template-columns: 1fr;
	}

	/* Only the Account card (.page-sidebar__account, sticky rule with the
	   rest of the sitewide sidebar above) pins while scrolling — the
	   search/categories/price card above it now scrolls away normally,
	   matching every other page's sidebar (revised 2026-09-07; this card
	   used to be the sticky one on its own, before the Account card
	   existed here to take over that role — two independently-sticky
	   siblings at the same `top` would otherwise overlap instead of
	   stacking). */

	/* The /templates/ page (with sidebar): admin-configurable via
	   Website Designs → Display Settings, default 3. The homepage
	   teaser (no-sidebar) keeps its own fixed step below instead. */
	.templates-layout:not(.templates-layout--no-sidebar) .template-grid {
		--cols: var(--template-cols, 3);
	}
}

@media (min-width: 1400px) {
	.templates-layout--no-sidebar .template-grid {
		--cols: 4;
	}
}

/* ---------- Final CTA (get_template_part()'d on every page) ---------- */

.final-cta {
	text-align: center;
}

.final-cta h2 {
	margin-bottom: var(--space-3);
}

.final-cta p {
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--space-8);
}

.final-cta__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
}

@media (min-width: 640px) {
	.final-cta__actions {
		flex-direction: row;
		justify-content: center;
	}
}

/* Final CTA + site footer share one desktop side-padding value
   (configurable via Customizer → Layout Spacing) since visually they
   form one closing "footer area" on every page. */
@media (min-width: 768px) {
	.final-cta {
		padding-inline: var(--footer-pad-desktop);
	}
}

/* ---------- Action button rows (get_template_part()'d/reused off the homepage) ---------- */

/* Same bug as .final-cta and .template-card__* before it: this class
   is used by the homepage hero AND the Website Design detail page's
   button row, but its styles lived in home.css (front-page-only) —
   without them the row degrades to unstyled stacked/overlapping
   inline links, which is almost certainly why the single design
   page's "Back" button reportedly didn't respond to clicks reliably. */
.hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.hero__actions .btn {
	width: 100%;
}

@media (min-width: 1024px) {
	.hero__actions {
		flex-direction: row;
		justify-content: center;
	}

	.hero__actions .btn {
		width: auto;
	}
}