.custom-regions-map__regions {
	--desktop-modal-width: clamp(250px, 25vw, 350px);
	--desktop-map-min-width: clamp(320px, 100%, 600px);

	@media (width < 1200px) {
		margin-block-end: 3rem;
		position: relative;
	}

	@media (width >= 1200px) {
		justify-content: unset;
	}

	.container {
		@media (width >= 1200px) {
			display: grid;
			gap: 2rem;
			grid-template-columns: var(--desktop-modal-width) auto;
			position: relative;
		}

		.modal-container {
			display: none;

			@media (width >= 1200px) {
				display: flex;
				flex-direction: column;
				height: 100%;
				inline-size: var(--desktop-modal-width);
				justify-content: stretch;

			}
			
			.modal-inner {
				@media (width >= 1200px) {
					background-color: #fff;
					block-size: 100%;
					border-radius: 8px;
					display: flex;
					flex-direction: column;
					gap: 1rem;
					padding: 1rem;
					position: relative;
				}
			}
		}

		#map-container {
			--modal-inner-padding: 16px;
			aspect-ratio: 1;

			@media (width >= 1200px) {
				min-inline-size: var(--desktop-map-min-width);
			}

			.fm-map-container {
				position: unset !important;
			}

			.fm-tooltip {
				inset-block-start: 0 !important;
				inset-inline-start: 0 !important;
				
				&.fm-mobile {
					opacity: 0 !important;
					@media (width < 1200px) {
						&[style*="display: none;"] {
							z-index: 0;
						}

						&[style*="display: block;"] {
							z-index: 500;
							opacity: 1 !important;
						}
					}
				}
				
				&:has([style="display: block;"]) {
					opacity: 1 !important;
				}

				@media (width >= 1200px) {
					--desktop-modal-width: 390px;
					-webkit-transition: opacity ease-in-out .2s;
					inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 5)) !important;
					inset-block-start: var(--modal-inner-padding) !important;
					inset-inline-start: var(--modal-inner-padding) !important;
					max-inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 5)) !important;
					position: absolute !important;
				}

				@media (width >= 1400px) {
					--desktop-modal-width: 400px;
					inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 6)) !important;
					max-inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 6)) !important;
				}

				&:has(.fm-frozen-x) {
					opacity: 1 !important;
				}

				.fm-tooltip-name {
					background-color: #fff;
					padding-block-end: 1rem;
					text-align: left !important;

					@media (width < 1200px) {
						padding: .75rem;
					}
				}

				.fm-tooltip-frame {
					border: 0;
					border-top-left-radius: 0;
					border-top-right-radius: 0;
					inline-size: clamp(300px, 90vw, var(--desktop-modal-width));
					max-inline-size: clamp(300px, 90vw, var(--desktop-modal-width));

					@media (width >= 1200px) {
						inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 8)) !important;
						max-inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 8)) !important;
						text-align: left !important;
					}

					@media (width >= 1440px) {
						inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 6)) !important;
						max-inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 6)) !important;
					}
				}

				table.fm-tooltip-frame {

					@media (width >= 1200px) {
						border-radius: 0 !important;
						block-size: 100%;
						min-inline-size: -webkit-fill-available !important;
						padding: 0 !important;
					}
				}
			}

			.fm-tooltip:not(:has(.map-modal__products)) {
				display: none !important;
			}

			.fm-tooltip-comment {
				max-block-size: 400px;
				overflow-y: auto;

				@media (width >= 900px) {
					block-size: 600px;
				}

				@media (width >= 1200px) {
					block-size: 660px !important;
					max-block-size: 660px !important;
				}

				.fm-tooltip-x {
					inset-block-start: 1rem;
					inset-inline-end: 1rem;
					position: absolute;

					@media (width >= 1200px) {
						inset-inline-end: .5rem;
					}
				}

				.inner-content {
					color: #400000;
					display: flex;
					flex-direction: column;
					font-family: var(--font-body-family);
					gap: 3rem;
					inline-size: 100%;
					max-block-size: 380px !important;
					overflow-y: auto !important;

					@media (width >= 1200px) {
						block-size: 636px !important;
						inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 5.5));
						max-block-size: 660px !important;
						padding-inline-end: 1rem;
					}

					@media (width >= 1400px) {
						inline-size: calc(var(--desktop-modal-width) - (var(--modal-inner-padding) * 6));
						padding-inline-end: 1.5rem;
					}

					h3 {
						border-bottom: 1px solid currentColor;
						color: #400000;
						font-family: var(--font-heading-family);
						font-size: 1.25rem;
						margin-block-end: 1rem;
					}

					.region-intro-text {
						font-size: 0.875rem;
					}

					.region__article {
						margin-block-end: 3.2rem;

						&:last-of-type {
							margin-block-end: 0;
						} 

						img {
							margin-block-end: 0.5rem;
							object-fit: cover;
						}

						p {
							--lines-to-show: 3;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: var(--lines-to-show);
							display: -webkit-box;
							font-size: 0.875rem;
							line-height: 1.2em;
							line-clamp: calc(var(--lines-to-show) * 1);
							max-block-size: calc(var(--lines-to-show) * 1.2em);
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					
					h4 {
						font-size: 1.125rem;
					}
				}

				a.popup__content-button {
					background-color: var(--rasoiee-green);
					border-radius: 100px;
					color: #FFF;
					display: block;
					font-size: clamp(0.75rem, 6vw, 0.875rem);
					margin-block-start: 0.75rem;
					padding: 0.75rem 1rem;
					text-align: center;
					text-decoration: none;

					&.modal-intro__button {
						max-inline-size: fit-content;
					}

					&:hover {
						background-color: #400000;
					}
				}

				.map-modal__products {
				
					h3:not(:is(:first-of-type)) {
						margin-block-start: 3rem;
					}

					.content {
						p {
							font-size: 0.875rem;
						}
					}
				}

				:is(.map-modal__products, .map-modal__articles) {
					display: flex;
					flex-direction: column;
					gap: 0.5rem;
					position: relative;
				}
			}
		}
	}
}


:is(.map-modal__products-grid, .map-modal__articles-grid) {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr 1fr;
	row-gap: 2rem;
	@media (width >= 1200px) {
		row-gap: 2rem;
	}
}

.modal-sticky {
	@media (width >= 1200px) {
		background-color: #fff;
		inset-block-start: 0;
		position: sticky;
	}
}

.map-modal__individual-product {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.custom-regions-map__heading {
	@media (width >= 1200px) {
		display: none;
	}
}