/**
 * ModuleCrafter Software Manager — public-facing design system.
 *
 * Same brand tokens as wp-admin: ink navy surfaces, teal-emerald
 * accent, yellow call-to-action, Plus Jakarta Sans.
 */

.mcsm-frontend {
	--mcsm-ink: #0b1220;
	--mcsm-ink-soft: #1e2a3e;
	--mcsm-teal: #0f9d8c;
	--mcsm-teal-dark: #0b7a6d;
	--mcsm-teal-light: #e6f6f4;
	--mcsm-yellow: #f4b400;
	--mcsm-yellow-dark: #b7860a;
	--mcsm-bg: #f4f6f9;
	--mcsm-surface: #ffffff;
	--mcsm-border: #e4e8ee;
	--mcsm-text: #1a2233;
	--mcsm-text-muted: #6b7686;
	--mcsm-radius: 12px;
	--mcsm-radius-sm: 8px;
	--mcsm-card-radius: 8px;

	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--mcsm-text);
	width: 100%;
	max-width:1330px;
	margin: 0 auto;
	padding: 0 24px 64px;
	box-sizing: border-box;
}

.mcsm-frontend * ,
.mcsm-frontend *::before,
.mcsm-frontend *::after {
	box-sizing: border-box;
}

.mcsm-frontend img {
	max-width: 100%;
	height: auto;
}

.mcsm-frontend a {
	color: inherit;
	text-decoration: none;
}

body.mcsm-lightbox-open {
	overflow: hidden;
}

/* Buttons */

.mcsm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--mcsm-radius-sm);
	font-weight: 700;
	font-size: 14px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}

.mcsm-btn:hover {
	transform: translateY(-1px);
}

/* Glass sheen sweep on the purchase buttons. The pseudo-element is
   clipped by overflow:hidden and slides across on hover. Sits behind
   the label via z-index so text stays crisp, and is disabled for
   visitors who ask for reduced motion. */
.mcsm-btn-primary,
.mcsm-btn-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.mcsm-btn-primary::before,
.mcsm-btn-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: -85%;
	width: 60%;
	height: 100%;
	z-index: -1;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-20deg);
	transition: left .55s ease;
	pointer-events: none;
}

.mcsm-btn-primary:hover::before,
.mcsm-btn-primary:focus-visible::before,
.mcsm-btn-cta:hover::before,
.mcsm-btn-cta:focus-visible::before {
	left: 125%;
}

.mcsm-btn-cta::before {
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .28) 50%,
		rgba(255, 255, 255, 0) 100%
	);
}

@media (prefers-reduced-motion: reduce) {
	.mcsm-btn {
		transition: none;
	}

	.mcsm-btn:hover {
		transform: none;
	}

	.mcsm-btn-primary::before,
	.mcsm-btn-cta::before {
		display: none;
	}
}

.mcsm-btn-primary {
	background: var(--mcsm-yellow);
	color: #3a2a00;
}

.mcsm-btn-secondary {
	background: #fff;
	color: var(--mcsm-ink);
	border-color: var(--mcsm-border);
}

.mcsm-btn-large {
	width: 100%;
	padding: 14px 20px;
	font-size: 15px;
}

.mcsm-btn-cta {
	background: var(--mcsm-ink);
	color: #fff;
}

/* Archive header + toolbar */

.mcsm-archive-header h1 {
	font-size: 32px;
	font-weight: 800;
	color: var(--mcsm-ink);
	margin: 0 0 8px;
}

.mcsm-archive-banner {
	position: relative;
	width: 100%;
	border-radius: var(--mcsm-radius);
	background-color: var(--mcsm-ink);
	/* `cover` makes the image fill the full banner box on any theme
	   width, cropping rather than letterboxing. Overridable per-site
	   via the "Banner image fit" setting — a photo wants cover, a
	   logo usually wants contain so it isn't cropped. */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom: 24px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.mcsm-archive-banner.mcsm-banner-fit-contain {
	background-size: contain;
}

/* Full-bleed: break out of the theme's content column so the banner
   spans the entire viewport width. Uses the classic 50vw negative
   margin trick, which works regardless of how wide the theme's
   container happens to be. */
.mcsm-archive-banner.mcsm-banner-full-bleed {
	border-radius: 0;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.mcsm-archive-banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(11, 18, 32, .55);
}

.mcsm-archive-banner-inner {
	position: relative;
	z-index: 1;
	padding: 24px;
	max-width: 720px;
}

.mcsm-archive-banner-title {
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	margin: 0;
	line-height: 1.2;
}

.mcsm-archive-banner-subtitle {
	color: rgba(255, 255, 255, .85);
	font-size: 15px;
	margin: 8px 0 0;
	line-height: 1.5;
}

.mcsm-archive-description {
	color: var(--mcsm-text-muted);
	max-width: 640px;
}

.mcsm-category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0;
}

.mcsm-category-pill {
	padding: 6px 16px;
	border-radius: 999px;
	border: 1px solid var(--mcsm-border);
	font-size: 13px;
	font-weight: 600;
	color: var(--mcsm-text);
	background: #fff;
	white-space: nowrap;
}

.mcsm-category-pill.is-active,
.mcsm-category-pill:hover {
	background: var(--mcsm-ink);
	color: #fff;
	border-color: var(--mcsm-ink);
}

.mcsm-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	padding: 16px;
	background: var(--mcsm-surface);
	border: 1px solid var(--mcsm-border);
	border-radius: var(--mcsm-radius);
}

.mcsm-search-field {
	display: flex;
	flex: 1 1 260px;
	max-width: 420px;
}

.mcsm-search-field input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--mcsm-border);
	border-right: none;
	border-radius: var(--mcsm-radius-sm) 0 0 var(--mcsm-radius-sm);
	font-family: inherit;
	font-size: 14px;
}

.mcsm-search-field button {
	padding: 10px 16px;
	background: var(--mcsm-ink);
	color: #fff;
	border: none;
	border-radius: 0 var(--mcsm-radius-sm) var(--mcsm-radius-sm) 0;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
}

.mcsm-sort-field {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mcsm-text-muted);
}

.mcsm-sort-field select {
	padding: 8px 12px;
	border: 1px solid var(--mcsm-border);
	border-radius: var(--mcsm-radius-sm);
	font-family: inherit;
	font-size: 14px;
	background: #fff;
}

/* Product grid — real CSS grid so cards always wrap correctly */

.mcsm-result-count {
	font-size: 13px;
	color: var(--mcsm-text-muted);
	margin: 0 0 16px;
}

.mcsm-product-grid.mcsm-layout-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/* Column overrides — used by the Elementor widget, and available if a
   category page ever needs a different density. */
.mcsm-product-grid.mcsm-cols-1 { grid-template-columns: minmax(0, 1fr); }
.mcsm-product-grid.mcsm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcsm-product-grid.mcsm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcsm-product-grid.mcsm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
	.mcsm-product-grid.mcsm-layout-grid,
	.mcsm-product-grid.mcsm-cols-4,
	.mcsm-product-grid.mcsm-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.mcsm-product-grid.mcsm-layout-grid,
	.mcsm-product-grid.mcsm-cols-4,
	.mcsm-product-grid.mcsm-cols-3,
	.mcsm-product-grid.mcsm-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mcsm-layout-grid .mcsm-product-card {
	display: flex;
	flex-direction: column;
}

.mcsm-layout-grid .mcsm-product-card-image {
	height: 190px;
}

/* List layout — full-width horizontal rows */

.mcsm-product-grid.mcsm-layout-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mcsm-layout-list .mcsm-product-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.mcsm-layout-list .mcsm-product-card-image {
	width: 200px;
	flex: 0 0 200px;
	height: auto;
}

.mcsm-layout-list .mcsm-product-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mcsm-layout-list .mcsm-product-card-actions {
	max-width: 320px;
}

.mcsm-product-card {
	background: var(--mcsm-surface);
	border: 1px solid var(--mcsm-border);
	border-radius: var(--mcsm-card-radius);
	overflow: hidden;
	transition: box-shadow .15s ease, transform .15s ease;
}

.mcsm-product-card:hover {
	box-shadow: 0 8px 24px rgba(11, 18, 32, .08);
	transform: translateY(-2px);
}

/* Image container never crops — the image is always shown in full,
   letterboxed inside the box rather than cover-cropped, since product
   art comes in wildly different aspect ratios (square icons, tall
   posters, wide screenshots). */
.mcsm-product-card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mcsm-teal-light);
	padding: 16px;
	overflow: hidden;
	flex-shrink: 0;
}

.mcsm-product-card-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.mcsm-product-card-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--mcsm-teal-light), #fff);
}

.mcsm-product-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
}

.mcsm-product-card-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--mcsm-ink);
}

.mcsm-product-card-excerpt {
	font-size: 13px;
	color: var(--mcsm-text-muted);
	margin: 0 0 12px;
	flex: 1;
}

.mcsm-product-card-price {
	font-size: 18px;
	font-weight: 800;
	color: var(--mcsm-teal-dark);
	margin: 0 0 14px;
}

.mcsm-product-card-actions {
	display: flex;
	gap: 8px;
}

.mcsm-product-card-actions .mcsm-btn {
	flex: 1;
	padding: 9px 14px;
	font-size: 13px;
}

.mcsm-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.mcsm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--mcsm-radius-sm);
	border: 1px solid var(--mcsm-border);
	font-weight: 600;
	font-size: 13px;
}

.mcsm-pagination .page-numbers.current {
	background: var(--mcsm-ink);
	color: #fff;
	border-color: var(--mcsm-ink);
}

.mcsm-empty-archive {
	text-align: center;
	padding: 60px 20px;
	color: var(--mcsm-text-muted);
}

/* Single product page */

.mcsm-breadcrumbs {
	font-size: 13px;
	color: var(--mcsm-text-muted);
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.mcsm-breadcrumbs a:hover {
	color: var(--mcsm-teal-dark);
}

.mcsm-single-header h1 {
	font-size: 32px;
	font-weight: 800;
	color: var(--mcsm-ink);
	margin: 0 0 16px;
	line-height: 1.25;
}

.mcsm-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	background: var(--mcsm-teal-light);
	color: var(--mcsm-teal-dark);
	padding: 14px 20px;
	border-radius: var(--mcsm-radius-sm);
	font-size: 13px;
	margin-bottom: 28px;
}

.mcsm-meta-bar strong {
	font-weight: 700;
}

.mcsm-hero {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 24px;
	margin-bottom: 40px;
}

.mcsm-hero-why {
	background: var(--mcsm-ink);
	color: #fff;
	border-radius: var(--mcsm-radius);
	padding: 28px;
}

.mcsm-hero-why h2 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 16px;
}

.mcsm-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mcsm-feature-list li {
	padding-left: 26px;
	position: relative;
	font-size: 14px;
	color: #dbe3ef;
	line-height: 1.5;
}

.mcsm-feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--mcsm-teal);
}

.mcsm-hero-description {
	color: #dbe3ef;
	font-size: 14px;
	line-height: 1.6;
}

.mcsm-tutorial-links {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 13px;
}

.mcsm-tutorial-links a {
	color: var(--mcsm-teal);
	font-weight: 700;
}

.mcsm-tutorial-links a:hover {
	text-decoration: underline;
}

.mcsm-tutorial-links span {
	color: #56637a;
}

.mcsm-hero-purchase {
	background: var(--mcsm-surface);
	border: 1px solid var(--mcsm-border);
	border-radius: var(--mcsm-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
}

.mcsm-hero-image {
	border-radius: var(--mcsm-radius-sm);
	overflow: hidden;
	background: var(--mcsm-teal-light);
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 220px;
	padding: 12px;
}

.mcsm-hero-image img {
	max-width: 100%;
	max-height: 196px;
	width: auto;
	object-fit: contain;
	display: block;
}

/* Pricing box: tabs (Subscription / Open source) + monthly/yearly toggle */

.mcsm-pricing-box {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mcsm-offer-tabs {
	display: flex;
	border: 1px solid var(--mcsm-border);
	border-radius: var(--mcsm-radius-sm);
	overflow: hidden;
}

.mcsm-offer-tab {
	flex: 1;
	padding: 9px 12px;
	background: #fff;
	border: none;
	border-right: 1px solid var(--mcsm-border);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--mcsm-text-muted);
	cursor: pointer;
}

.mcsm-offer-tab:last-child {
	border-right: none;
}

.mcsm-offer-tab.is-active {
	background: var(--mcsm-ink);
	color: #fff;
}

.mcsm-offer-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mcsm-cycle-toggle {
	display: flex;
	gap: 8px;
}

.mcsm-cycle-btn {
	flex: 1;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--mcsm-border);
	border-radius: var(--mcsm-radius-sm);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--mcsm-text);
	cursor: pointer;
}

.mcsm-cycle-btn.is-active {
	background: var(--mcsm-teal-light);
	border-color: var(--mcsm-teal);
	color: var(--mcsm-teal-dark);
}

.mcsm-hero-price {
	font-size: 26px;
	font-weight: 800;
	color: var(--mcsm-ink);
	margin: 0;
	text-align: center;
}

.mcsm-hero-no-link {
	font-size: 13px;
	color: var(--mcsm-text-muted);
	text-align: center;
	margin: 0;
}

.mcsm-description,
.mcsm-screenshots,
.mcsm-changelog,
.mcsm-faq {
	margin-bottom: 44px;
}

.mcsm-description h2,
.mcsm-screenshots h2,
.mcsm-changelog h2,
.mcsm-faq h2 {
	font-size: 21px;
	font-weight: 800;
	color: var(--mcsm-ink);
	margin: 0 0 18px;
}

.mcsm-description {
	font-size: 15px;
	line-height: 1.7;
	color: var(--mcsm-text);
}

.mcsm-screenshots-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.mcsm-screenshot {
	display: block;
	border-radius: var(--mcsm-radius-sm);
	overflow: hidden;
	border: 1px solid var(--mcsm-border);
}

.mcsm-screenshot img {
	width: 100%;
	display: block;
	transition: transform .2s ease;
}

.mcsm-screenshot:hover img {
	transform: scale(1.04);
}

/* Lightbox — fullscreen, click-through gallery */

.mcsm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(11, 18, 32, .92);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mcsm-lightbox[hidden] {
	display: none;
}

.mcsm-lightbox-figure {
	margin: 0;
	max-width: min(90vw, 1000px);
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.mcsm-lightbox-image {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--mcsm-radius-sm);
	display: block;
}

.mcsm-lightbox-counter {
	color: #dbe3ef;
	font-size: 13px;
}

.mcsm-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mcsm-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.mcsm-lightbox-prev {
	left: 16px;
}

.mcsm-lightbox-next {
	right: 16px;
}

.mcsm-lightbox-close:hover,
.mcsm-lightbox-nav:hover {
	background: rgba(255, 255, 255, .2);
}

/* Changelog */

.mcsm-changelog-entry {
	border: 1px solid var(--mcsm-border);
	border-radius: var(--mcsm-radius-sm);
	padding: 16px 18px;
	margin-bottom: 12px;
}

.mcsm-changelog-entry-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 8px;
}

.mcsm-changelog-version {
	font-weight: 800;
	color: var(--mcsm-ink);
	font-size: 15px;
}

.mcsm-changelog-date {
	font-size: 13px;
	color: var(--mcsm-text-muted);
}

.mcsm-changelog-notes {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mcsm-text);
}

.mcsm-changelog-notes p:first-child {
	margin-top: 0;
}

.mcsm-changelog-notes p:last-child {
	margin-bottom: 0;
}

/* FAQ — minimal: hairline dividers instead of boxed cards, so a long
   list reads as one calm column rather than a stack of competing
   rectangles. */
.mcsm-faq-list {
	border-top: 1px solid var(--mcsm-border);
}

.mcsm-faq-item {
	border-bottom: 1px solid var(--mcsm-border);
	padding: 0;
	margin: 0;
}

.mcsm-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mcsm-ink);
	list-style: none;
	padding: 18px 40px 18px 0;
	position: relative;
	transition: color .15s ease;
}

.mcsm-faq-item summary:hover {
	color: var(--mcsm-teal-dark);
}

.mcsm-faq-item summary::-webkit-details-marker {
	display: none;
}

/* Chevron drawn in CSS (no icon font dependency) that rotates open. */
.mcsm-faq-item summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 24px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--mcsm-text-muted);
	border-bottom: 2px solid var(--mcsm-text-muted);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .2s ease, border-color .2s ease;
}

.mcsm-faq-item[open] summary::after {
	transform: rotate(-135deg);
	border-color: var(--mcsm-teal-dark);
}

.mcsm-faq-item[open] summary {
	color: var(--mcsm-teal-dark);
}

.mcsm-faq-answer {
	margin: 0;
	padding: 0 40px 20px 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--mcsm-text-muted);
}

.mcsm-faq-answer p:first-child {
	margin-top: 0;
}

.mcsm-cta-banner {
	background: var(--mcsm-teal);
	color: #fff;
	border-radius: var(--mcsm-radius);
	padding: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.mcsm-cta-banner p {
	font-size: 19px;
	font-weight: 700;
	margin: 0;
}

/* ---------------------------------------------------------------- */
/* Mobile — minimal, professional, thumb-friendly                   */
/* ---------------------------------------------------------------- */

@media (max-width: 782px) {
	.mcsm-hero {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 600px) {
	.mcsm-frontend {
		padding: 20px 16px 44px;
	}

	.mcsm-archive-header h1 {
		font-size: 24px;
	}

	.mcsm-single-header h1 {
		font-size: 24px;
	}

	.mcsm-category-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 16px -16px;
		padding: 0 16px 4px;
		gap: 6px;
	}

	.mcsm-category-nav::-webkit-scrollbar {
		display: none;
	}

	.mcsm-toolbar {
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
		gap: 10px;
	}

	.mcsm-search-field {
		/* The base rule sets `flex: 1 1 260px` for the desktop row
		   layout. Once the toolbar flips to `flex-direction: column`
		   here, that 260px flex-basis stops being a width and becomes
		   a HEIGHT — which is what made the search box render as a
		   giant 260px-tall block on phones. Reset it to auto. */
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
	}

	.mcsm-sort-field {
		justify-content: space-between;
	}

	.mcsm-sort-field select {
		flex: 1;
	}

	.mcsm-product-grid.mcsm-layout-grid,
	.mcsm-product-grid.mcsm-cols-2,
	.mcsm-product-grid.mcsm-cols-3,
	.mcsm-product-grid.mcsm-cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mcsm-layout-list .mcsm-product-card {
		flex-direction: column;
	}

	.mcsm-layout-list .mcsm-product-card-image {
		width: 100%;
		flex-basis: auto;
		height: 160px;
	}

	.mcsm-layout-list .mcsm-product-card-actions {
		max-width: none;
	}

	.mcsm-product-card-image {
		height: 160px;
	}

	.mcsm-product-card-body {
		padding: 14px 16px 16px;
	}

	.mcsm-product-card-actions {
		flex-direction: column;
	}

	.mcsm-meta-bar {
		font-size: 12px;
		padding: 12px 14px;
		gap: 6px 16px;
	}

	.mcsm-hero-why,
	.mcsm-hero-purchase {
		padding: 18px;
	}

	.mcsm-cta-banner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: 22px;
	}

	.mcsm-cta-banner .mcsm-btn {
		width: 100%;
	}

	.mcsm-screenshots-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mcsm-archive-banner {
		height: 150px !important;
	}

	.mcsm-archive-banner-title {
		font-size: 20px;
	}

	.mcsm-archive-banner-subtitle {
		font-size: 13px;
		margin-top: 5px;
	}

	.mcsm-archive-banner-inner {
		padding: 16px;
	}
}

/* ---------------------------------------------------------------- */
/* Elementor widgets                                                */
/* ---------------------------------------------------------------- */

/* Widgets sit inside whatever container Elementor gives them, so they
   drop the store page's own width cap and vertical padding. */
.mcsm-frontend.mcsm-widget {
	max-width: none;
	padding: 0;
}

.mcsm-widget-heading {
	font-size: 24px;
	font-weight: 800;
	color: var(--mcsm-ink);
	margin: 0 0 20px;
}

.mcsm-widget-all {
	margin: 24px 0 0;
	text-align: center;
}

.mcsm-category-grid {
	display: grid;
	gap: 16px;
}

.mcsm-category-grid.mcsm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcsm-category-grid.mcsm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcsm-category-grid.mcsm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mcsm-category-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	background: var(--mcsm-surface);
	border: 1px solid var(--mcsm-border);
	border-radius: var(--mcsm-card-radius);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mcsm-category-card:hover {
	border-color: var(--mcsm-teal);
	box-shadow: 0 8px 24px rgba(11, 18, 32, .08);
	transform: translateY(-2px);
}

.mcsm-category-card-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--mcsm-ink);
}

.mcsm-category-card-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--mcsm-teal-dark);
}

.mcsm-category-card-desc {
	font-size: 13px;
	color: var(--mcsm-text-muted);
	line-height: 1.5;
	margin-top: 4px;
}

.mcsm-category-count {
	opacity: .7;
	font-weight: 500;
}

@media (max-width: 900px) {
	.mcsm-category-grid.mcsm-cols-3,
	.mcsm-category-grid.mcsm-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mcsm-category-grid.mcsm-cols-2,
	.mcsm-category-grid.mcsm-cols-3,
	.mcsm-category-grid.mcsm-cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mcsm-widget-heading {
		font-size: 20px;
	}
}