/* ---------------------------------------------------------------------------
 * Fama — وبلاگ
 *
 * چهار ستون: ستون اول سایدبار، سه ستون بعدی کارت نوشته.
 * کارت نوشته همان ‎.mm-melk‎ است با چند تفاوت کوچک.
 * ------------------------------------------------------------------------ */

.mm-blog {
	display: grid;
	grid-template-columns: 312px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: 24px;
}

.mm-blog__main {
	min-width: 0;
}

.mm-blog__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--mm-text-muted);
}

.mm-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* ---------- کارت نوشته ---------- */

/*
 * عنوان ملک یک‌خطی است چون همیشه کوتاه است؛ عنوان نوشته می‌تواند بلند باشد،
 * پس دو خط می‌گیرد و ارتفاعش ثابت می‌ماند تا کارت‌ها هم‌تراز بمانند.
 */
.mm-melk--post .mm-melk__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	height: 48px;
	white-space: normal;
}

.mm-melk--post .mm-melk__excerpt {
	margin: 12px 0 0;
	height: 44px;
	overflow: hidden;
	font-size: 14px;
	line-height: 22px;
	color: var(--mm-text-muted);
}

/* ردیف‌های قیمت در نوشته جای زمان مطالعه و بازدید را می‌گیرند. */
.mm-melk--post .mm-melk__prices {
	margin-top: 12px;
}

/* برچسب دقیقه روی تصویر */
.mm-melk--post .mm-melk__photos svg {
	width: 14px;
	height: 14px;
}

/* ---------- سایدبار ---------- */

.mm-blogside {
	position: sticky;
	top: 16px;
	display: grid;
	gap: 16px;
	min-width: 0;
}

/* جستجو */

.mm-blogside__search {
	position: relative;
	display: flex;
	align-items: center;
}

/*
 * ورودی‌های فرم در سراسر طرح یک شکل دارند: ارتفاع ۴۸، شعاع ۱۲، متن ۱۲px با
 * وزن ۳۰۰ و آیکون ۱۶ پیکسلی در لبه — همان چیزی که در باکس جستجوی هیرو و
 * سایدبار آرشیو هست. این ورودی ۵۲ پیکسل با شعاع ۱۶ و متن ۱۴ بود.
 */
.mm-blogside__search input[type="search"] {
	width: 100%;
	height: 48px;
	padding-inline: 46px 14px;
	border: 1px solid var(--mm-border);
	border-radius: 12px;
	background: var(--mm-white);
	font: inherit;
	font-size: 12px;
	font-weight: var(--mm-fw-light);
	color: var(--mm-text);
	transition: border-color var(--mm-transition), box-shadow var(--mm-transition);
}

.mm-blogside__search input[type="search"]::placeholder {
	font-size: 12px;
	font-weight: var(--mm-fw-light);
	color: var(--mm-text-muted);
}

.mm-blogside__search input[type="search"]:focus {
	outline: none;
	border-color: var(--mm-primary);
	box-shadow: 0 0 0 3px rgba(6, 56, 190, .1);
}

/*
 * آیکون جست‌وجو حالا دکمه است: قاب ۳۲ با ذره‌بین ۱۸ پیکسلی و رنگ خاکستری
 * که روی هاور آبی می‌شود. قبلاً یک آیکون با پس‌زمینهٔ بنفش در ۱۶ پیکسل
 * فشرده شده بود و مثل یک مربع رنگی دیده می‌شد.
 */
.mm-blogside__search-btn {
	position: absolute;
	inset-inline-start: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--mm-text-muted);
	cursor: pointer;
	transition: color var(--mm-transition), background-color var(--mm-transition);
}

.mm-blogside__search-btn:hover,
.mm-blogside__search-btn:focus-visible {
	color: var(--mm-primary);
	background: var(--mm-gray-100, #F4F4F4);
}

.mm-blogside__search-icon {
	width: 18px;
	height: 18px;
}

/* جعبهٔ بازشو */

.mm-blogside__box {
	background: var(--mm-white);
	border: 1px solid var(--mm-border);
	border-radius: 16px;
	overflow: hidden;
}

.mm-blogside__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	font-size: 16px;
	font-weight: var(--mm-fw-semibold);
	cursor: pointer;
	list-style: none;
}

.mm-blogside__head::-webkit-details-marker {
	display: none;
}

.mm-blogside__head-icon {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--mm-primary);
}

/*
 * فلش باز و بسته. عمداً border فیزیکی است؛ با inline-end در RTL
 * فلش به پهلو می‌افتد و معنی باز و بسته را نمی‌رساند.
 */
.mm-blogside__head::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-inline-start: auto;
	margin-block-start: 4px;
	flex: none;
	border-right: 2px solid var(--mm-text-muted);
	border-bottom: 2px solid var(--mm-text-muted);
	transform: rotate(-135deg);
	transition: transform var(--mm-transition);
}

.mm-blogside__box:not([open]) .mm-blogside__head::after {
	margin-block-start: -4px;
	transform: rotate(45deg);
}

/*
 * ‎<details>‎ ذاتاً انیمیشن ندارد؛ محتوا یک‌دفعه ظاهر و ناپدید می‌شود. باز و
 * بسته شدن در ‎main.js‎ با ارتفاع متحرک انجام می‌شود و این کلاس فقط در طول
 * همان حرکت روی المان می‌نشیند.
 */
.mm-blogside__body {
	padding: 0 16px 8px;
	border-top: 1px solid var(--mm-border);
}

.mm-blogside__body.is-animating {
	overflow: hidden;
}

/* مرتب‌سازی */

.mm-blogside__radio {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	font-size: 14px;
	text-align: start;
	color: var(--mm-text-muted);
	transition: color var(--mm-transition);
}

.mm-blogside__radio + .mm-blogside__radio {
	border-top: 1px solid var(--mm-border);
}

.mm-blogside__radio:hover {
	color: var(--mm-text);
}

.mm-blogside__radio.is-active {
	color: var(--mm-text);
	font-weight: var(--mm-fw-medium);
}

/*
 * بدون margin خودکار. دایره اولین فرزند است و در RTL خودش لبهٔ راست
 * می‌نشیند؛ margin-inline-start: auto کل ردیف را به چپ هل می‌داد.
 */
.mm-blogside__dot {
	width: 18px;
	height: 18px;
	flex: none;
	border: 1px solid var(--mm-border-strong);
	border-radius: 50%;
	transition: border-color var(--mm-transition);
}

.mm-blogside__radio.is-active .mm-blogside__dot {
	border-color: var(--mm-primary);
	border-width: 5px;
}

/* دسته‌بندی */

.mm-blogside__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	font-size: 14px;
	color: var(--mm-text-muted);
	transition: color var(--mm-transition);
}

.mm-blogside__cat:hover,
.mm-blogside__cat.is-active {
	color: var(--mm-primary);
}

.mm-blogside__cat-name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mm-blogside__bullet {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--mm-border-strong);
	transition: background-color var(--mm-transition);
}

.mm-blogside__cat:hover .mm-blogside__bullet,
.mm-blogside__cat.is-active .mm-blogside__bullet {
	background: var(--mm-accent);
}

.mm-blogside__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 8px;
	flex: none;
	border-radius: 8px;
	background: var(--mm-surface-soft);
	font-size: 12px;
	color: var(--mm-text-muted);
	transition: background-color var(--mm-transition), color var(--mm-transition);
}

/* عدد کنار دسته هم باید با خود دسته واکنش نشان دهد، نه اینکه خنثی بماند. */
.mm-blogside__cat:hover .mm-blogside__count,
.mm-blogside__cat:focus-visible .mm-blogside__count,
.mm-blogside__cat.is-active .mm-blogside__count {
	background: var(--mm-primary);
	color: var(--mm-white);
}

/* ---------- نوشتهٔ تکی ---------- */

/* ستون اصلی نوشته باریک‌تر از فهرست نیست؛ همان شبکهٔ ‎.mm-blog‎ است. */

.mm-spost {
	background: var(--mm-surface);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius-xl);
	padding: var(--mm-panel-pad);
}

.mm-spost__thumb {
	position: relative;
}

/* تصویر شاخص عمودی نباید کل صفحه را بگیرد؛ سقف ارتفاع و برش از مرکز. */
.mm-spost__thumb img {
	display: block;
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--mm-radius-lg);
}

/*
 * بج تاریخ روی تصویر. با inset-inline-start در RTL لبهٔ راست می‌نشیند —
 * همان گوشه‌ای که چشم فارسی‌خوان اول می‌بیند.
 */
.mm-spost__date {
	position: absolute;
	top: 16px;
	inset-inline-start: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 56px;
	padding: 10px 12px;
	background: var(--mm-primary);
	color: var(--mm-primary-contrast);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-md);
}

.mm-spost__date b {
	font-size: var(--mm-fs-lg);
	font-weight: var(--mm-fw-extrabold);
	line-height: 1;
}

.mm-spost__date i {
	font-style: normal;
	font-size: var(--mm-fs-xs);
	line-height: 1;
}

.mm-spost__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-2) var(--mm-space-5);
	margin-top: var(--mm-space-5);
	padding-bottom: var(--mm-space-4);
	border-bottom: 1px solid var(--mm-border);
	font-size: var(--mm-fs-sm);
	color: var(--mm-text-muted);
}

.mm-spost__mi {
	display: inline-flex;
	align-items: center;
	gap: var(--mm-space-2);
	color: inherit;
	transition: color var(--mm-transition);
}

.mm-spost__mi svg {
	flex: none;
	color: var(--mm-primary);
}

a.mm-spost__mi:hover,
a.mm-spost__mi:focus-visible {
	color: var(--mm-primary);
}

/* در ردیف متا فقط نام دسته لینک است؛ برچسب «دسته‌بندی» متن ساده می‌ماند. */
.mm-spost__cats {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

.mm-spost__cats a {
	color: var(--mm-primary);
	transition: opacity var(--mm-transition);
}

.mm-spost__cats a:hover,
.mm-spost__cats a:focus-visible {
	opacity: .75;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mm-spost__sep {
	margin-inline-start: -2px;
	color: var(--mm-text-muted);
}

.mm-spost__title {
	margin: var(--mm-space-4) 0 0;
	font-size: var(--mm-fs-2xl);
	line-height: var(--mm-lh-tight);
}

.mm-spost .mm-prose {
	margin-top: var(--mm-space-4);
}

/* دیدگاه‌ها در پنل سفید جدا، هم‌قواره با کارت مطلب. */
.mm-spost__comments {
	margin-top: var(--mm-space-6);
	background: var(--mm-surface);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius-xl);
	padding: var(--mm-panel-pad);
}

/* ---------- مطالب مرتبط ---------- */

.mm-spost-rel {
	margin-top: var(--mm-space-12);
}

.mm-spost-rel__title {
	margin: 0 0 var(--mm-space-6);
	font-size: var(--mm-fs-xl);
}

/*
 * ریل اسلایدر مشترک چهارتایی است؛ کارت نوشته هم‌عرض شبکهٔ سه‌ستونهٔ
 * وبلاگ می‌خواهد، پس اینجا سه‌تایی می‌شود.
 */
.mm-spost-rel .mm-slider__track {
	grid-auto-columns: calc((100% - var(--mm-space-5) * 2) / 3);
}

/* ---------- واکنش‌گرایی ---------- */

@media (max-width: 1200px) {
	.mm-blog {
		grid-template-columns: 260px minmax(0, 1fr);
	}

	.mm-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.mm-blog {
		grid-template-columns: minmax(0, 1fr);
	}

	.mm-blogside {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.mm-blogside__search {
		grid-column: 1 / -1;
	}

	.mm-spost-rel .mm-slider__track {
		grid-auto-columns: calc((100% - var(--mm-space-5)) / 2);
	}
}

@media (max-width: 620px) {
	.mm-blog__grid,
	.mm-blogside {
		grid-template-columns: minmax(0, 1fr);
	}

	.mm-spost-rel .mm-slider__track {
		grid-auto-columns: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * حالت بارگذاری فیلترهای ایجکسی
 *
 * فهرست فقط کم‌رنگ و بی‌کلیک می‌شود؛ جای خالی یا اسکلت نمی‌گذاریم تا
 * ارتفاع صفحه نپرد و چشم کاربر گم نشود.
 * ------------------------------------------------------------------------ */
.mm-blog__results {
	transition: opacity .18s ease;
}

.mm-blog__results.is-loading {
	opacity: .45;
	pointer-events: none;
}

/* ===========================================================================
 * تایپوگرافی بدنهٔ مقاله
 *
 * پیش‌تر بدنهٔ نوشته همان استایل برگه‌های حقوقی را می‌گرفت: سرفصل ۲۰ پیکسلی
 * با یک نوار آبی کنارش که در یک مقاله ناجور است و سلسله‌مراتب را هم
 * نمی‌ساخت. اینجا یک مقیاس مقاله‌ای درست می‌نشیند:
 *   لید ۱۸/۳۶ خاکستری → H2 ۲۴/۴۰ → H3 ۱۹/۳۴ → بند ۱۷/۳۴
 * فاصلهٔ بالای سرفصل بیشتر از فاصلهٔ پایین آن است تا هر سرفصل به بند
 * زیر خودش بچسبد و بلوک‌های مطلب از هم جدا دیده شوند.
 * ======================================================================== */

.mm-spost .mm-prose {
	margin-top: var(--mm-space-6);
	font-size: 17px;
	line-height: 34px;
	color: #2E2E2E;
}

/* بند اول نقش «لید» را دارد: کمی بزرگ‌تر و آرام‌تر. */
.mm-spost .mm-prose > p:first-of-type {
	margin-bottom: 28px;
	font-size: 18px;
	line-height: 36px;
	color: var(--mm-text-muted);
}

.mm-spost .mm-prose h2,
.mm-spost .mm-prose h3,
.mm-spost .mm-prose h4 {
	padding: 0;
	border: 0;
	color: var(--mm-text);
	scroll-margin-top: 96px;
}

.mm-spost .mm-prose h2 {
	margin: 44px 0 14px;
	font-size: 24px;
	font-weight: var(--mm-fw-extrabold);
	line-height: 40px;
	letter-spacing: -.2px;
}

.mm-spost .mm-prose h3 {
	margin: 32px 0 10px;
	font-size: 19px;
	font-weight: var(--mm-fw-bold);
	line-height: 34px;
}

.mm-spost .mm-prose h4 {
	margin: 26px 0 8px;
	font-size: 17px;
	font-weight: var(--mm-fw-semibold);
	line-height: 30px;
}

.mm-spost .mm-prose h2:first-child,
.mm-spost .mm-prose h3:first-child {
	margin-top: 0;
}

.mm-spost .mm-prose p {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 34px;
	color: inherit;
}

/* ---------- فهرست‌ها ---------- */

.mm-spost .mm-prose ul,
.mm-spost .mm-prose ol {
	margin: 0 0 24px;
	padding-inline-start: 0;
	list-style: none;
}

.mm-spost .mm-prose li {
	position: relative;
	margin-bottom: 10px;
	padding-inline-start: 26px;
	font-size: 17px;
	line-height: 34px;
}

/* نشانهٔ فهرست با شکل ساخته می‌شود تا در RTL جای درستی بنشیند. */
.mm-spost .mm-prose ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	top: 14px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mm-primary);
}

.mm-spost .mm-prose ol {
	counter-reset: mm-ol;
}

.mm-spost .mm-prose ol > li {
	counter-increment: mm-ol;
}

.mm-spost .mm-prose ol > li::before {
	content: counter(mm-ol);
	position: absolute;
	inset-inline-start: 0;
	top: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(6, 56, 190, .08);
	font-size: 12px;
	font-weight: var(--mm-fw-bold);
	color: var(--mm-primary);
}

.mm-spost .mm-prose li > ul,
.mm-spost .mm-prose li > ol {
	margin: 10px 0 0;
}

/* ---------- نقل‌قول، جداکننده، پیوند ---------- */

.mm-spost .mm-prose blockquote {
	margin: 32px 0;
	padding: 20px 24px;
	background: var(--mm-surface-soft);
	border-inline-start: 4px solid var(--mm-primary);
	border-radius: var(--mm-radius-md);
	font-size: 18px;
	line-height: 36px;
	color: var(--mm-text);
}

.mm-spost .mm-prose blockquote p:last-child {
	margin-bottom: 0;
}

.mm-spost .mm-prose hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--mm-border);
}

.mm-spost .mm-prose a {
	color: var(--mm-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.mm-spost .mm-prose strong {
	font-weight: var(--mm-fw-bold);
	color: var(--mm-text);
}

/* ---------- تصویر و جدول ---------- */

.mm-spost .mm-prose figure {
	margin: 32px 0;
}

.mm-spost .mm-prose img {
	border-radius: var(--mm-radius-lg);
}

.mm-spost .mm-prose figcaption {
	margin-top: 10px;
	font-size: 13px;
	line-height: 24px;
	color: var(--mm-text-muted);
	text-align: center;
}

.mm-spost .mm-prose table {
	width: 100%;
	margin: 28px 0;
	border-collapse: collapse;
	font-size: 15px;
	overflow: hidden;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius-md);
}

.mm-spost .mm-prose th,
.mm-spost .mm-prose td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--mm-border);
	text-align: start;
}

.mm-spost .mm-prose thead th {
	background: var(--mm-surface-soft);
	font-weight: var(--mm-fw-bold);
}

.mm-spost .mm-prose tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 640px) {
	.mm-spost .mm-prose {
		font-size: 16px;
		line-height: 32px;
	}

	.mm-spost .mm-prose h2 {
		margin-top: 36px;
		font-size: 21px;
		line-height: 34px;
	}

	.mm-spost .mm-prose h3 {
		font-size: 18px;
	}
}

/* ===========================================================================
 * دیدگاه‌ها
 *
 * قالب تا پیش از این فایل comments.php نداشت و وردپرس مارکاپ قدیمی
 * سازگاری را چاپ می‌کرد: فرم بی‌استایل، فیلد وب‌سایت و دکمهٔ پیش‌فرض
 * مرورگر. حالا فرم با همان اجزای قالب ساخته می‌شود.
 * ======================================================================== */

.mm-comments__title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: var(--mm-fw-bold);
	line-height: 32px;
}

.mm-comments__list {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.mm-comments__list .children {
	margin: 16px 0 0;
	padding-inline-start: 28px;
	list-style: none;
}

.mm-comment__body {
	padding: 20px;
	margin-bottom: 16px;
	background: var(--mm-surface-soft);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius-lg);
}

.mm-comment__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.mm-comment__avatar img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.mm-comment__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mm-comment__author {
	font-size: 15px;
	font-weight: var(--mm-fw-bold);
	color: var(--mm-text);
}

.mm-comment__date,
.mm-comment__pending {
	font-size: 12px;
	color: var(--mm-text-muted);
}

.mm-comment__text {
	font-size: 15px;
	line-height: 30px;
	color: var(--mm-text);
}

.mm-comment__text p:last-child {
	margin-bottom: 0;
}

.mm-comment__reply a {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: var(--mm-fw-medium);
	color: var(--mm-primary);
}

/* ---------- فرم ---------- */

.mm-comments__form,
.comment-respond {
	margin-top: 8px;
}

.comment-reply-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: var(--mm-fw-bold);
}

.comment-reply-title small {
	margin-inline-start: 8px;
	font-size: 13px;
	font-weight: var(--mm-fw-regular);
}

/* نام و ایمیل کنار هم؛ روی موبایل زیر هم. */
.mm-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.mm-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 16px;
}

.mm-form__field label {
	font-size: 13px;
	font-weight: var(--mm-fw-medium);
	color: var(--mm-text);
}

.mm-form__req {
	color: var(--mm-accent, #F4731A);
}

.mm-form__control {
	width: 100%;
	padding: 0 14px;
	height: 48px;
	border: 1px solid var(--mm-border);
	border-radius: 12px;
	background: var(--mm-white);
	font: inherit;
	font-size: 14px;
	color: var(--mm-text);
	transition: border-color var(--mm-transition), box-shadow var(--mm-transition);
}

textarea.mm-form__control {
	height: auto;
	padding: 14px;
	line-height: 28px;
	resize: vertical;
}

.mm-form__control:focus {
	outline: none;
	border-color: var(--mm-primary);
	box-shadow: 0 0 0 3px rgba(6, 56, 190, .1);
}

.mm-form__control::placeholder {
	color: var(--mm-text-muted);
}

.mm-form__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--mm-text-muted);
}

.mm-form__check input {
	width: 16px;
	height: 16px;
	accent-color: var(--mm-primary);
}

/* دکمهٔ ارسال با همان دکمهٔ استاندارد قالب یکی می‌شود. */
.mm-comments .form-submit {
	margin: 0;
}

.mm-comments .form-submit input[type="submit"] {
	min-height: 48px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--mm-radius-lg);
	background: var(--mm-primary);
	font: inherit;
	font-size: 16px;
	font-weight: var(--mm-fw-semibold);
	color: var(--mm-white);
	cursor: pointer;
	transition: background-color var(--mm-transition), transform var(--mm-transition);
}

.mm-comments .form-submit input[type="submit"]:hover {
	background: var(--mm-primary-dark, #04299B);
}

.mm-comments .form-submit input[type="submit"]:active {
	transform: translateY(1px);
}

@media (max-width: 640px) {
	.mm-form__row {
		grid-template-columns: minmax(0, 1fr);
	}
}