/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/**
 * =========================================================
 * SHOP BY CATEGORY
 * =========================================================
 */

.sp-category-section {
	width: 100%;
	margin: 0 0 45px;
	padding: 0;
}


/* =========================================================
 * Heading
 * ========================================================= */

.sp-category-heading {
	width: 100%;
	margin: 0 0 30px !important;
	padding: 0 !important;

	text-align: center !important;

	font-size: 28px !important;
	line-height: 1.3;
	font-weight: 600;

	color: #222;
}


/* =========================================================
 * Category Grid
 * 5 categories per row
 * ========================================================= */

.sp-category-grid {
	display: grid !important;

	grid-template-columns: repeat(5, minmax(0, 1fr));

	gap: 25px;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
 * Individual Category
 * ========================================================= */

.sp-category-card {
	display: block !important;

	width: 100% !important;
	min-width: 0;

	margin: 0 !important;
	padding: 0 !important;

	text-align: center;

	list-style: none;
}


/* =========================================================
 * Category Link
 * ========================================================= */

.sp-category-card-link {
	display: block !important;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	text-align: center;

	text-decoration: none !important;

	color: inherit;
}


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

.sp-category-image {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 190px;

	margin: 0 0 15px;
	padding: 10px;

	box-sizing: border-box;

	background: #fff;

	overflow: hidden;
}


/* =========================================================
 * Category Image
 * ========================================================= */

.sp-category-img {
	display: block !important;

	width: auto !important;
	height: auto !important;

	max-width: 170px !important;
	max-height: 170px !important;

	margin: 0 auto !important;

	object-fit: contain;

	transition: transform 0.25s ease;
}


/* =========================================================
 * Category Name
 * ========================================================= */

.sp-category-title {
	display: block !important;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	text-align: center !important;

	font-size: 16px !important;
	line-height: 1.4;

	font-weight: 500;

	color: #222;

	word-break: normal;
	overflow-wrap: break-word;
}


/* =========================================================
 * Hover
 * ========================================================= */

.sp-category-card-link:hover {
	text-decoration: none !important;
}

.sp-category-card-link:hover .sp-category-img {
	transform: scale(1.04);
}

.sp-category-card-link:hover .sp-category-title {
	text-decoration: underline;
}


/* =========================================================
 * TABLET
 * 3 categories per row
 * ========================================================= */

@media (max-width: 1024px) {

	.sp-category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 25px 20px;
	}

	.sp-category-image {
		height: 180px;
	}

	.sp-category-img {
		max-width: 150px !important;
		max-height: 150px !important;
	}

}


/* =========================================================
 * MOBILE
 * 2 categories per row
 * ========================================================= */

@media (max-width: 767px) {

	.sp-category-section {
		margin-bottom: 35px;
	}

	.sp-category-heading {
		margin-bottom: 25px !important;
		font-size: 24px !important;
	}

	.sp-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 25px 15px;
	}

	.sp-category-image {
		height: 150px;
		padding: 8px;
	}

	.sp-category-img {
		max-width: 130px !important;
		max-height: 130px !important;
	}

	.sp-category-title {
	display: block !important;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	text-align: center !important;

	font-size: 16px !important;
	line-height: 1.4;

	font-weight: 500;

	color: #222;

	word-break: normal;
	overflow-wrap: break-word;
}

.sp-category-count {
	font-weight: 400;
	color: #555;
	white-space: nowrap;
}

}


/* =========================================================
 * SMALL MOBILE
 * ========================================================= */

@media (max-width: 480px) {

	.sp-category-grid {
		gap: 20px 10px;
	}

	.sp-category-image {
		height: 135px;
	}

	.sp-category-img {
		max-width: 115px !important;
		max-height: 115px !important;
	}

}