:root {
	--aff-card-overlay-opacity: 0.925;
}

#recommended-products-container {
	* {
		font-family: Montserrat;
	}
	.store-block {
		padding: 60px 20px;
		p {
			color: #36414d;
		}
		&:nth-child(1) {
			background: #f8f8f8;
		}
		&:nth-child(2) {
			background: #ffffff;
		}
		section {
			margin: 0 auto;
			max-width: 980px;
			display: flex;
			flex-direction: column;
			gap: 16px;
			.section-header {
				h2 {
					font-size: 36px;
					font-weight: 600;
				}
				p {
					font-size: 16px;
					line-height: 1.4;
					margin: 1em 0;
					text-wrap: balance;
				}
			}
			.subcategory-cards,
			.category-cards {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
				.subcategory-card,
				.category-card {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 4px;
					overflow: hidden;
					aspect-ratio: 960/540;
					background-size: contain !important;
					background-position: center !important;
					background-repeat: no-repeat !important;
					/* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); */
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
					transition: transform 0.3s, box-shadow 0.3s;
					&:hover {
						transform: translateY(-5px);
						box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
						cursor: pointer;
					}
					&[style*='codepen'] {
						background-size: cover !important;
					}
					.card-body {
						background: rgba(0, 0, 0, 0.75);
						width: 100%;
						height: 100%;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						gap: 12px;
						& > h3 {
							color: white;
							font-size: 21px;
							font-weight: 600;
							margin: 0;
						}
						& > button {
							background: #013b42;
							color: white;
							padding: 4px 12px;
							border-radius: 100px;
							font-size: 17px;
							border: none;
						}
					}
				}
				.subcategory-card {
					&:nth-child(1) .card-body {
						background-color: rgba(140, 199, 196, var(--aff-card-overlay-opacity));
						button {
							background: #4e7d7b;
						}
					}
					&:nth-child(2) .card-body {
						background-color: rgba(115, 148, 180, var(--aff-card-overlay-opacity));
						button {
							background: #315070;
						}
					}
					&:nth-child(3) .card-body {
						background-color: rgba(247, 181, 66, var(--aff-card-overlay-opacity));
						button {
							background: #b48432;
						}
					}
					&:nth-child(4) .card-body {
						background-color: rgba(247, 115, 81, var(--aff-card-overlay-opacity));
						button {
							background: #7d3d2c;
						}
					}
					&:nth-child(5) .card-body {
						background-color: rgba(255, 198, 181, var(--aff-card-overlay-opacity));
						button {
							background: #c6826f;
						}
					}
				}
				.category-card {
					.card-body {
						background-color: rgba(140, 199, 196, var(--aff-card-overlay-opacity));
						width: 100%;
						height: 100%;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						gap: 12px;
						& > h3 {
							color: white;
							font-size: 21px;
							font-weight: 600;
							margin: 0;
						}
						& > button {
							background: #4e7d7b;
							color: #fff;
							padding: 4px 12px;
							border-radius: 100px;
							font-size: 17px;
							border: none;
						}
					}
				}
			}
		}
		section#must-haves {
		}
		section#optionals {
		}
	}
}

#subcategory-modal,
#category-modal {
	* {
		font-family: Montserrat;
		box-sizing: border-box;
	}
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	.modal-content {
		background: #f8f8f8;
		border-radius: 8px;
		padding: 30px;
		width: 90%;
		max-width: 960px;
		max-height: 80vh;
		overflow-y: auto;
		position: relative;
		@media (max-width: 400px) {
			padding: 15px;
		}
		.close {
			position: absolute;
			top: 6px;
			right: 15px;
			cursor: pointer;
			font-size: 32px;
		}
		.modal-header {
			margin-bottom: 32px;
			h2 {
				font-size: 24px;
				font-weight: 700;
				margin: 0;
			}
			p {
				text-wrap: balance;
				font-size: 16px;
				line-height: 1.4;
				color: #36414d;
				margin-top: 10px;
			}
		}
		.subcategory-header {
			h3 {
				margin: 28px 0 14px;
				font-size: 21px;
				font-weight: bold;
			}
		}
		.modal-body {
			.product-cards {
				* {
					text-decoration: none;
				}
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
				gap: 24px;
				.product-card {
					background-color: #fff;
					border: 1px solid #eaeaea;
					border-radius: 8px;
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
					transition: transform 0.3s, box-shadow 0.3s;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					text-wrap: balance;
					max-width: 340px;
					width: 100%;
					margin: 0 auto;
					&:hover {
						transform: translateY(-5px);
						box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
					}
					&[href*='kaariprehab.com'],
					&[href*='jotform'] {
						img {
							object-fit: cover;
							padding: 0;
						}
					}
					img {
						width: 100%;
						aspect-ratio: 2/1;
						padding: 15px;
						object-fit: contain;
						border-bottom: 1px solid #eee;
					}
					&.cover-thumbnail {
						img {
							padding: 0;
							object-fit: cover;
							border-bottom: 1px solid #eee;
						}
					}
					.product-info {
						padding: 15px;
						flex: 1;
						min-height: 200px;
						.product-title {
							font-weight: 600;
							font-size: 18px;
							margin-bottom: 5px;
							line-height: 1.3;
							color: #444;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							overflow: hidden;
						}
						.product-desc {
							font-size: 14px;
							color: #666;
							margin-bottom: 10px;
							line-height: 1.4;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 4;
							line-clamp: 4;
							overflow: hidden;
						}
						.product-price {
							color: #28a745;
							font-weight: bold;
							margin-bottom: 10px;
							font-size: 16px;
						}
					}
					.card-footer {
						padding: 0 15px 15px 15px;
						.buy-button {
							display: block;
							text-align: center;
							text-decoration: none;
							background-color: #8cc7c3;
							color: #fff;
							padding: 8px 12px;
							border-radius: 4px;
							font-size: 14px;
							transition: background-color 0.3s;

							&:hover {
								background-color: #80bcb8;
							}
						}
					}
				}
			}
		}
	}
}

/* .products-cards {
	.category-section {
		padding: 80px 20px;
		&:nth-of-type(odd) {
			background: #fafafa;
		}
		&:nth-of-type(even) {
			background: white;
		}
		& > * {
			max-width: 1020px;
			margin-left: auto !important;
			margin-right: auto !important;
		}
		h2 {
			font-size: 36px;
			font-weight: 600;
		}
		& > p {
			font-size: 16px;
			line-height: 1.4;
			margin: 1em 0;
			text-wrap: balance;
		}

		.subcategories-wrapper {
			margin-top: 30px;
			gap: 40px;
			display: flex;
			flex-direction: column;

			.subcategory-section {
				h3 {
					font-size: 29px;
					font-weight: 600;
				}
				& > p {
					font-size: 16px;
					line-height: 1.4;
					margin: 10px 0;
					text-wrap: balance;
				}
			}
		}
	}
} */