/* Popup Styles */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	transition: opacity 0.3s ease;
}

.popup.hidden {
	display: none;
}

.popup-content {
	background: #fff;
	padding: clamp(3rem, 5.787vw, 5.787vw) clamp(2rem, 3.472vw, 3.472vw);
	border-radius: 10px;
	position: relative;
	max-width: 1568px;
	width: calc(90.741vw - (clamp(2rem, 3.472vw, 3.472vw) * 2));
	display: flex;
}

#product-popup .popup-content {
	max-height: 70vh;
	overflow-y: scroll;
}

.popup-content h3 {
	margin-bottom: 1.4rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid #000000;
	font-size: clamp(2rem, 2.778vw, 2.778vw);
	text-transform: uppercase;
	font-family: var(--atrament-font);
}

.popup-content img {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.close-popup {
	position: absolute;
	top: 1.5rem;
	right: clamp(2rem, 3.472vw, 3.472vw);
	background: transparent;
	border: none;
	cursor: pointer;
	color: #333;
	padding: 0;
	display: flex;
	width: clamp(40px, 2.604vw, 2.604vw);
	height: auto;
	aspect-ratio: 1;
	transition: 0.45s;
	z-index: 10;
}

.close-popup:hover {
	transform: rotate(90deg);
}

/* Products */
.product-section {
	padding-left: 10.5vw;
	padding-right: 10.5vw;
	padding-top: clamp(80px, 6.944vw, 6.944vw);
	padding-bottom: clamp(80px, 6.944vw, 6.944vw);
}

.product-section h2 {
	font-size: clamp(3.2rem, 6.366vw, 7rem);
	font-weight: 900;
	color: #ffc002;
	-webkit-text-stroke: #be1f24;
	-webkit-text-stroke-width: 2px;
	text-shadow: 6px 4px #be1f24;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 0.75rem;
}

.product-section .top-container {
	text-align: center;
	margin-bottom: clamp(2.2rem, 3.472vw, 5.5rem);
}

.product-list .product-item {
	display: flex;
	aspect-ratio: 470 / 615;
	height: 100%;
	position: relative;
	clip-path: polygon(0% 0%, 3% 25%, 1% 50%, 3% 80%, 0% 100%, 100% 100%, 97% 80%, 99% 50%, 97% 25%, 100% 0%);
}

.product-list .product-item * {
	cursor: pointer;
}

.product-list .product-item:hover .product-content img {
	scale: 1.04;
}

.product-list {
	display: inline-flex;
	width: 100%;
}

.product-list .product-content {
	display: flex;
	width: 100%;
	height: 100%;
	position: relative;
}

.product-list .product-item:nth-child(3n + 1) .product-content:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(/wp-content/uploads/2025/01/product-bg-decor-1.svg) center center no-repeat;
	background-size: cover;
	width: 50%;
	height: 100%;
	opacity: 0.1;
}

.product-list .product-item:nth-child(3n + 2) .product-content:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(/wp-content/uploads/2025/01/product-bg-decor-2.svg) center center no-repeat;
	background-size: cover;
	width: 50%;
	height: 100%;
	opacity: 0.1;
}

.product-list .product-item:nth-child(3n + 3) .product-content:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(/wp-content/uploads/2025/01/product-bg-decor-3.svg) center center no-repeat;
	background-size: cover;
	width: 50%;
	height: 100%;
	opacity: 0.1;
}

.product-list .product-content img {
	width: 100%;
	transform: rotate(80deg);
	transition: 0.3s;
}

.product-list .product-item h3 {
	position: absolute;
	bottom: 20%;
	left: 0;
	right: 0;
	width: fit-content;
	margin: auto;
	font-size: clamp(3.4rem, 4.556vw, 5.5rem);
	font-family: var(--atrament-font);
	line-height: 1.05;
	color: var(--white);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	-webkit-text-stroke: 2px var(--grey);
	text-shadow: 4px 2px var(--grey);
	padding: 0 2rem;
}

.product-list .product-item h3.small {
	font-size: clamp(2.2rem, 3.125vw, 3.125vw) !important;
	-webkit-text-stroke: 1px var(--grey) !important;
	text-shadow: 4px 3px var(--grey) !important;
	max-width: 90%;
}

.product-section button.open-popup {
	appearance: none;
	border: 0;
	background: transparent;
	width: 100%;
	height: 100%;
}

/* Swiper Styles */
.swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*  */
#product-popup .popup-content > div {
	width: 50%;
}

#product-popup .popup-content .product-content {
	overflow-y: scroll;
}

#product-popup .popup-content > div:not(.product-content) {
	padding-right: 11.574vw;
	width: calc(50% - 11.574vw);
	display: flex;
	flex-direction: column;
}

#product-popup .product-tab {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

#popup-nutrients-list {
	font-family: var(--atrament-font);
}

#popup-nutrients-list .parent.nutrient-heading {
    padding: 0;
    border: 0;
    margin-bottom: 0.6rem;
}

#popup-nutrients-list .parent {
	display: flex;
	flex-wrap: wrap;
}

#popup-nutrients-list .parent > span {
	width: calc(100% / 3);
	margin: 0;
	font-weight: 900;
}

#popup-nutrients-list .parent > span:not(:first-child),
#popup-nutrients-list .parent > .sub-item span:not(:first-child) {
	text-align: right;
}

#popup-nutrients-list .parent > .sub-item {
	width: 100%;
}

#popup-nutrients-list .parent > .sub-item > div {
	display: flex;
	justify-content: flex-end;
}

#popup-nutrients-list .parent > .sub-item > div > span:first-child {
	width: calc((100% / 2.8) - 2rem);
}

#popup-nutrients-list .parent > .sub-item span {
	width: calc(100% / 3);
	margin: 0;
}

#popup-nutrients-list .parent {
	display: flex;
	flex-wrap: wrap;
	padding: 0.75rem 0;
	border-top: 2px solid #000000;
}

#popup-nutrients-list .parent:last-child {
	border-bottom: 2px solid #000000;
}

#popup-nutrients-list span {
	line-height: 1;
	margin: 0.35rem 0 !important;
	font-size: clamp(1rem, 1.505vw, 1.505vw) !important;
}

#product-popup #popup-image {
	width: clamp(300px, 20.833vw, 20.833vw);
	margin-bottom: clamp(1.2rem, 1.563vw, 1.563vw);
}

.product-tab-content:not(.active) {
	display: none;
}

#product-popup .popup-content > div:not(.product-content) > div p {
	margin-bottom: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 1;
}

#product-popup .popup-content > div:not(.product-content) > div p span {
	margin: 0;
	line-height: 1;
	font-family: var(--montserrat-font);
	font-size: clamp(1rem, 1.042vw, 1.042vw);
}

#product-popup .popup-content > div:not(.product-content) > div p span:first-child {
	font-size: clamp(1.2rem, 1.505vw, 1.505vw);
	font-family: var(--atrament-font);
	font-weight: 900;
	text-transform: uppercase;
}

.certificate-holder {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.certificate-holder img {
	width: clamp(2.8rem, 4.34vw, 4.34vw);
	object-fit: contain;
	height: 100%;
}

#product-popup .popup-content > div:not(.product-content) .sizes-detail {
	flex-grow: 1;
}

.product-list-holder {
	position: relative;
}

.product-list:not(.active) {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	transform: translateY(40px);
	opacity: 0;
	transition: 0.35s;
	transition-delay: 0s;
	pointer-events: none !important;
}

.product-list {
	transform: translateY(0px);
	opacity: 1;
	transition: 0.45s;
	transition-delay: 0.35s;
}

.product-tabs-holder {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

div#popup-ingredients-list .parent {
	display: flex;
	flex-wrap: wrap;
	padding: 0.75rem 0;
	border-top: 2px solid #000000;
	flex-direction: column;
}

div#popup-ingredients-list .parent li {
	margin-bottom: 0.2rem;
}

div#popup-ingredients-list .parent:last-child {
	border-bottom: 2px solid #000000;
}

div#popup-ingredients-list .parent {
	display: flex;
	flex-wrap: wrap;
	padding: 0.75rem 0;
	border-top: 2px solid #000000;
	flex-direction: column;
}

div#popup-ingredients-list .parent span:first-child {
	margin-bottom: 0.45rem;
	font-family: var(--atrament-font);
	font-weight: 900;
	font-size: clamp(1.2rem, 1.505vw, 1.505vw);
	text-transform: uppercase;
}

div#popup-ingredients-list .parent span {
	margin-bottom: 0;
	font-family: var(--montserrat-font);
	font-weight: 300;
	font-size: clamp(0.85rem, 1.042vw, 1.042vw);
}

div#popup-ingredients-list .parent li {
	font-size: clamp(0.85rem, 1.042vw, 1.042vw);
}

/*  */
.product-tabs-holder.mobile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 260px;
	width: 100%;
	margin: 0 auto 2rem;
	padding: 0.65rem;
	border: 3px solid var(--red);
	border-radius: 999px;
	background: #ffffff69;
	backdrop-filter: blur(30px);
	z-index: 10;
}

.product-tabs-holder.mobile span {
	margin: 0;
	font-family: var(--atrament-font);
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	width: -webkit-fill-available;
}

.product-tabs-holder.mobile .dropdown-holder span {
	padding: 0.5rem;
}

.product-tabs-holder.mobile .dropdown-holder span:first-child {
	padding-top: 1rem;
}

.product-tabs-holder.mobile .dropdown-holder span:last-child {
	padding-bottom: 1rem;
	padding-top: 0;
}

.product-tabs-holder.mobile .dropdown-holder {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 100%;
	border: 3px solid var(--red);
	background: #ffffffed;
	backdrop-filter: blur(30px);
	border-radius: 0.8rem;
	position: absolute;
	top: 125%;
	z-index: 10;
	pointer-events: none;
	transition: 0.3s;
	transform: translateY(-20px);
	opacity: 0;
}

.product-tabs-holder.mobile:before {
	content: "";
	position: absolute;
	top: 0;
	right: 1rem;
	bottom: 0;
	width: auto;
	height: 48%;
	aspect-ratio: 1;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS02Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xOS41IDguMjUtNy41IDcuNS03LjUtNy41IiAvPgo8L3N2Zz4K)
		center center no-repeat;
	margin: auto;
	background-size: contain;
	transition: 0.3s;
}

.product-tabs-holder.mobile:has(> #productTabsPlaceholder.active):before {
	transform: rotate(180deg);
	transform-origin: center;
}

.product-tabs-holder.mobile:has(> #productTabsPlaceholder.active) .dropdown-holder {
	pointer-events: all;
	transform: translateY(0px);
	opacity: 1;
}

@media (min-width: 970px) {
	.product-section .top-container p {
		max-width: 60%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 767px) {
	.popup-content {
		flex-direction: column;
	}

	#product-popup .popup-content > div:not(.product-content),
	#product-popup .popup-content > div {
		width: 100%;
		padding: 0;
		margin-bottom: 2rem;
	}

	#product-popup #popup-image {
		width: 175px;
	}

	#popup-nutrients-list .parent > .sub-item > div > span:first-child {
		width: calc(100% / 3);
	}

	#product-popup .product-tab {
		display: inline-flex;
		width: 100%;
		overflow-x: scroll;
	}

	#product-popup .product-tab span {
		white-space: nowrap;
	}
}

@media (max-width: 565px) {
	.close-popup {
		top: 1.5rem;
		right: 2rem;
	}

	.close-popup * {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain;
	}

	.popup-content {
		width: 96%;
	}

	#product-popup .popup-content {
		max-height: 70vh;
	}
}