/**
 * ==========================================================
 * SHMT Utility Classes
 * SasthaHouse Marketplace Toolkit
 * ==========================================================
 *
 * Reusable layout and helper classes.
 *
 * @package SHMT
 */

/* ==========================================================
   Container
========================================================== */

.shmt-container {
	width: 100%;
	max-width: var(--shmt-container-width);
	margin-inline: auto;
	padding-inline: var(--shmt-space-6);
}

/* ==========================================================
   Sections
========================================================== */

.shmt-section {
	padding-block: var(--shmt-space-8);
}

/* ==========================================================
   Grid
========================================================== */

.shmt-grid {
	display: grid;
	gap: var(--shmt-space-6);
}

.shmt-grid-2 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.shmt-grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.shmt-grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ==========================================================
   Flex
========================================================== */

.shmt-flex {
	display: flex;
}

.shmt-flex-wrap {
	flex-wrap: wrap;
}

.shmt-align-center {
	align-items: center;
}

.shmt-align-start {
	align-items: flex-start;
}

.shmt-align-end {
	align-items: flex-end;
}

.shmt-justify-between {
	justify-content: space-between;
}

.shmt-justify-center {
	justify-content: center;
}

.shmt-gap-sm {
	gap: var(--shmt-space-2);
}

.shmt-gap-md {
	gap: var(--shmt-space-4);
}

.shmt-gap-lg {
	gap: var(--shmt-space-6);
}

/* ==========================================================
   Width
========================================================== */

.shmt-w-100 {
	width: 100%;
}

/* ==========================================================
   Text
========================================================== */

.shmt-text-center {
	text-align: center;
}

.shmt-text-left {
	text-align: left;
}

.shmt-text-right {
	text-align: right;
}

/* ==========================================================
   Margin Helpers
========================================================== */

.shmt-mb-sm {
	margin-bottom: var(--shmt-space-2);
}

.shmt-mb-md {
	margin-bottom: var(--shmt-space-4);
}

.shmt-mb-lg {
	margin-bottom: var(--shmt-space-6);
}

.shmt-mt-sm {
	margin-top: var(--shmt-space-2);
}

.shmt-mt-md {
	margin-top: var(--shmt-space-4);
}

.shmt-mt-lg {
	margin-top: var(--shmt-space-6);
}

/* ==========================================================
   Hide
========================================================== */

.shmt-hidden {
	display: none !important;
}