enno-component:has(.instagram-feed[grid]),
.section--product-instagram:has(.instagram-feed[grid]) {
	visibility: hidden;
	height: 0;
	margin: 0;
}
.instagram-feed {
	display: flex;
	flex-direction: column;

	.instagram-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20px;
		order: 1;

		.instagram-post {
			position: relative;
			padding-top: 100%;
			padding-bottom: 0;
			background-color: #FBFBF9;
			overflow: hidden;

			&:after {
				position: absolute;
				top: 10px;
				right: 10px;
				width: 20px;
				height: 20px;
			}
			&:not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)) {
				display: none;
			}
			&.carousel_album:after {
				content: url("data:image/svg+xml;charset=UTF-8, <svg viewBox='0 0 100 100.2' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M40.5 80.8H15.9c-1.4 0-2.8-.1-4-.5-2.5-.9-4.9-2-6.9-4C2.9 74.2 1.3 71.9.6 69c-.4-1.7-.5-3.5-.5-5.2C0 53.2 0 42.7 0 32.2c0-5.4.1-10.8.1-16.3q0-6.45 4.5-11.1c2-2 4.4-3.4 7.2-4.1 1.4-.4 2.9-.6 4.4-.6C27.3.1 38.4 0 49.4 0c5.4 0 10.8-.1 16.2.2 6.6.3 11.2 3.7 13.9 9.7 1 2.3 1.2 4.8 1.2 7.3v47.2c0 2.9-.5 5.6-1.9 8.1s-3.3 4.6-5.8 6.1c-2.8 1.6-5.9 2.3-9.2 2.3-7.7-.1-15.5-.1-23.3-.1m.1-9.1h20.9c1.3 0 2.6.1 3.9-.6s2.6-1.3 3.6-2.5c1.8-2.1 2.6-4.5 2.6-7.3-.1-11.6 0-23.2 0-34.9 0-2.7.1-5.5-.1-8.2-.3-3.7-2.1-6.5-5.5-8.2-1.6-.8-3.3-.9-5.1-.9H19.1c-2.6 0-5.1.8-7.1 2.9-1.2 1.2-2.1 2.6-2.5 4.3-.3 1.4-.4 2.8-.4 4.2 0 13.2-.1 26.5 0 39.7 0 1.7.2 3.4.6 5 .7 2.5 2.3 4.4 4.7 5.5 1.6.7 3.2 1.1 5 1.1 7.1-.1 14.2-.1 21.2-.1'/><path fill='%23fff' d='M20.9 91.2c.3-.1.5-.2.6-.2h51.4c2.9 0 5.9 0 8.8-.1 1.8 0 3.4-.6 4.9-1.6.5-.3 1.1-.5 1.5-.9.6-.6 1-1.3 1.5-2 1.6-2.7 1.8-5.7 1.8-8.7V21.5c1.6.4 2.8 1.2 3.9 2.3.7.7 1.7 1.8 2.2 2.6.9 1.5 1.5 2.7 2 4.4.4 1.5.4 3.2.5 4.8.1 10.9.1 21.8.1 32.7 0 5.9-.1 11.8-.2 17.7 0 3.3-1.3 6.1-3.4 8.6-2.3 2.8-5.4 4.4-8.9 5-.9.1-1.8.1-2.7.1-8.1.1-16.3.3-24.4.3H36.7c-2.9 0-5.8-.5-8.5-1.8-1.9-.9-3.5-2.3-4.9-3.9-.9-.8-1.6-1.9-2.4-3.1'/></svg>");
			}
			&.video:after {
				content: url("data:image/svg+xml;charset=UTF-8, <svg viewBox='0 0 96.4 96.4' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M48.2 96.4c-7.1 0-14.2.1-21.2 0C15.9 96.1 7.7 91 2.7 81.1.9 77.6.1 73.8.1 70 0 55.5 0 41 0 26.5.1 12 12 .1 26.6.1 41 0 55.4 0 69.9.1c13.7.1 25.2 10.8 26.3 24.5.1 1.1.1 2.2.1 3.4 0 13.9.1 27.8 0 41.8-.1 9-3.9 16.2-11.1 21.6-4.6 3.4-9.8 5.1-15.4 5.1-7.2-.1-14.4-.1-21.6-.1m40.5-64.7c-.5 0-.8-.1-1.2-.1H8.8c-.9 0-1.2.2-1.2 1.2v37.1c.1 10.3 8.6 18.8 18.8 18.9 14.5.1 28.9 0 43.4 0 3.6 0 7-1 10.1-3.1 5.7-3.8 8.7-9.2 8.8-16 .1-12.3 0-24.6 0-36.8.1-.4 0-.7 0-1.2m-26-7.7c-.1-.3-.2-.5-.3-.7-2.8-5-5.6-10-8.3-15-.4-.7-.9-.7-1.6-.7H33.3c-.4 0-.8 0-1.3.1.1.3.2.6.3.8 2.8 5 5.5 10 8.4 15 .2.4.9.6 1.3.6h19.2c.5 0 .9-.1 1.5-.1m-.1-16.4c.1.3.1.4.1.5 2.8 5.1 5.6 10.2 8.5 15.3.2.3.8.6 1.2.6h15.1c.3 0 .6-.1 1-.1-1.3-6.6-4.8-11.4-10.7-14.4-4.8-2.4-10-1.8-15.2-1.9M32.3 24c-.1-.2-.1-.4-.2-.5-2.7-4.9-5.5-9.8-8.2-14.8-.4-.8-1-.8-1.6-.5-2.2 1-4.7 1.8-6.7 3.1-4.4 3-6.9 7.3-7.8 12.7z'/><path fill='%23fff' d='M36.9 59.4V48.8c0-3.8 3.2-5.6 6.4-3.7 6.1 3.5 12.2 7 18.3 10.6 3.2 1.8 3.2 5.6.1 7.4-6.1 3.6-12.3 7.1-18.5 10.7-1.1.7-2.3.9-3.6.5-1.7-.6-2.8-2-2.8-3.9.1-3.7.1-7.4.1-11'/></svg>");
			}
			> img {
				position: absolute;
				min-width: 100%;
				max-width: inherit;
				top: 50%;
				left: 50%;
				margin: 0;
				transform: translate(-50%, -50%);

				&.horizontal {
					width: auto;
					height: 100%;
				}
				&.vertical {
					width: fill-available;
					width: -moz-available;
					width: -webkit-fill-available;
					height: auto;
				}
			}
			.instagram-post-overlay {
				position: absolute;
				display: flex;
				flex-direction: column;
				align-items: center;
					justify-content: center;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				margin: 0;
				padding: 10%;
				background-color: rgba(0,0,0,0.8);
				color: white !important;
				text-align: center;
				opacity: 0;
				cursor: pointer;
				transition: all 0.3s ease;

				> div {
					display: flex;
					column-gap: 20px;
					margin-bottom: 16px;

					svg {
						height: 20px;
						margin-right: 5px;
					}
				}
			}
			&:hover .instagram-post-overlay {
				opacity: 1;
				transition: all 0.3s ease;
			}
			.instagram-post-caption {
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 10;
				overflow: hidden;
			}
		}
	}
	.instagram-load-more {
		display: block;
		order: 2;
		margin: 20px auto 0 auto;
		padding: 5px 10px;
		background-color: white;
		border-radius: 2px;
		box-shadow: 0 0 0 1px #000;
		cursor: pointer;
	}
	.instagram-load-more-mobile {
		display: none;
	}
	.instagram-popup {
		position: fixed;
		display: none;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.8);
		z-index: 99999;

		&.show {
			display: block;
		}
		.instagram-popup-content {
			background-color: white;
			max-width: 100%;
			max-height: 100vh;
			width: 640px;
			margin: auto;
			overflow-y: scroll;

			.close-instagram-popup {
				position: sticky;
				width: fit-content;
				top: 0;
				margin-left: auto;
				padding: 10px 20px 10px 5px;
				text-align: right;
				cursor: pointer;

				svg {
					width: 40px;
					padding: 12px;
					background-color: white;
					border: 1px solid #CCCCCC;
					border-radius: 100%;
				}
			}
			.instagram-post {
				a {
					color: black;
				}
				.instagram-post-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10px 20px;
					border-top: 1px solid #E9E9E9;

					a:first-child {
						display: flex;
						align-items: center;
						width: 100%;

						svg {
							border: 2px solid #DD3071;
						}
					}
					svg {
						width: 40px;
						height: 40px;
						padding: 5px;
						border-radius: 100%;
					}
					span {
						padding: 0 10px;
						font-size: 14px;
						font-weight: 500 !important;
					}
					> a:first-of-type > span:last-of-type {
						margin-left: auto;
					}
				}
				> img,
				> video {
					width: 100%;
					max-height: calc(100vh - 60px);
				}
				.instagram-carousel {
					position: relative;
					display: flex;

					> img {
						display: none;
					}
					> img.current {
						display: block;
					}
					.instagram-carousel-arrows {
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 100%;
						top: 0;
						left: 0;
						right: 0;
						padding: 0 20px;
						opacity: 0;
						transition: all 0.3s ease;

						> div {
							display: flex;
							flex: 1;
							align-items: center;
							height: 100%;
							cursor: pointer;
						}
						.instagram-carousel-previous {
							justify-content: start;
						}
						.instagram-carousel-next {
							justify-content: end;
						}
						svg {
							width: 15px;
						}
						.instagram-carousel-previous svg {
							transform: scale(-1);
						}
					}
					&:hover .instagram-carousel-arrows {
						opacity: 1;
						transition: all 0.3s ease;
					}
					&:has(> img.current:first-of-type) .instagram-carousel-previous,
					&:has(> img.current:last-of-type) .instagram-carousel-next {
						visibility: hidden;
					}
				}
				> p {
					margin: 0;
				}
				.instagram-post-caption {
					padding: 20px;

					.instagram-post-likes {
						display: flex;
						margin-bottom: 20px;
						font-size: 14px;
						font-weight: 500 !important;

						svg {
							height: 17px;
							margin-right: 5px;

							path {
								fill: black;
							}
						}
					}
					> p {
						text-align: justify;
					}
					a {
						margin-right: 10px;
						font-weight: 500 !important;
					}
					.instagram-post-tags {
						display: flex;
						flex-wrap: wrap;
						margin-top: 20px;
					}
				}
				.instagram-post-date {
					padding: 0 20px 20px 20px;
					color: #CCCCCC;
					font-size: 10px;
					text-transform: uppercase;
				}
			}
		}
	}
}

@media screen and (max-width: 849px) {
	.instagram-feed {
		.instagram-grid {
			grid-template-columns: 1fr 1fr;
			grid-gap: 10px;

			.instagram-post:nth-of-type(3) {
				display: none;
			}
		}
		.instagram-load-more-desktop {
			display: none;
		}
		.instagram-load-more-mobile {
			display: block;
		}
		.instagram-popup .instagram-carousel-arrows {
			display: flex;
			opacity: 1;
		}
	}
}