.mod_hpk_product_detail{
	overflow: hidden;
	
	.hpk_product_detail{
			
		display: grid;
		
		.go_back_wrapper {
			grid-column: 1 / -1;
			
			.go_back_link {
				text-decoration: none;
				font-size: 0.75rem;
				color: #031834;
				
				&:hover {
					text-decoration: underline;
				}
				
				svg {
					width: 2em;
					margin-right: 8px;
				}
				
				.go_back_text {
					text-transform: uppercase;
				}
			}	
		}
		
		.mobile_headlines {
			display: none;
			visibility: hidden;
			position: relative;
			line-height: normal;
			
			@media screen and (max-width:56.25rem) {
				display: block;
				visibility: visible;
				
				&:before {
					position: absolute;
					content: "";
					height: 1px;
					top: 0;
					left: -50%;
					width: 200%;
					background: #EDEDED;
				}
				
				.product_title {
					margin-top: 15px;
					margin-bottom: 5px;
					font-weight: 200;
				}
				
				.kollektionen_namen {
					margin-bottom: 10px;
					font-size: 0.875rem;
				}
				
				&:has(.marken_wrapper) {
					display: grid;
					grid-template-columns: 7fr 3fr;
					gap: 20px;
					align-items: center;
					
					.name_wrapper {
						justify-self: start;
					}
					
					.marken_wrapper {
						justify-self: end;
					}
					
				}
			}
			
		}
		
		.desktop_headlines {
			display: block;
			visibility: visible;
			margin-bottom: 20px;
			
			&:has(.marken_wrapper) {
				display: grid;
				grid-template-columns: 7fr 3fr;
				gap: 20px;
				align-items: center;
				
				.name_wrapper {
					justify-self: start;
				}
				
				.marken_wrapper {
					justify-self: end;
				}
				
			}
			
			@media screen and (max-width:56.25rem) {
				display: none;
				visibility: hidden;
			}
		}
		
		.image_content_wrapper {
			max-width: 100%;
			min-width: 0;
			position: relative;
			.swiper-container {
				max-width: 100%;
				
				.swiper {
					max-width: 100%;
					
					.item {
						.item_inside {
							.image_container {
								img {
									height: 100%;
									width: 100%;
									object-fit: cover;
								}
							}
						}
					}
					
					.swiper-button-next,
					.swiper-button-prev {
					
						--swiper-navigation-sides-offset: -10px;
						
						@media screen and (max-width: 37.438rem) {
							display: block;
						}
					
						width: fit-content;
						height: fit-content;
						
						svg {
							width: calc(clamp(3.125rem, 1.6vw + 2.525rem, 4.125rem));
							height: calc(clamp(3.125rem, 1.6vw + 2.525rem, 4.125rem));
						}
						
						&:after {
							display: none;
						}
					}
					
					.swiper-pagination {
						position: relative;
						top: 0;
						margin-top: 10px;
						
						.swiper-pagination-bullet {
							border-radius: 0;
							width: 40px;
							height: 2px;
							opacity: 1;
							background: #EDEDED;
							position: relative;
						}
						
						.swiper-pagination-bullet::before {
							position: absolute;
							content: "";
							left: 0;
							top: -20px;
							right: 0;
							height: 20px;
							background: transparent;
						}
						
						.swiper-pagination-bullet-active {
							background: #2DA4DC;
						}
					}
				}
			}

			.hpk-favorite-button {
				position: absolute;
				top: 20px;
				right: 20px;
				height: 50px;
				width: 50px;
			}

			@media screen and (max-width:56.25rem) {
				margin-bottom: 30px;
			}
		}
		
		.detail_content_wrapper {
			
			.main_info_wrapper {
				.musterservice_wrapper {
					.musterservice_name {
						font-weight: 600;
					}
				}
			}
			
			.hpk-details-accordion {
				font-weight: 300;
				
				.properties_list, .fabric-properties {
					display: grid;
					grid-template-columns: auto 1fr;
					column-gap: calc(clamp(0.938rem, 3.618vw + 0.033rem, 4.375rem));
					row-gap: 10px;
					align-items: center;
					
					.property_name {
						font-weight: 600;
					}
					
					.property_value.value_pflegeanleitung, .property_value.funktionen_value {
						
						display: flex;
						flex-wrap: wrap;
						gap: 10px;
						align-items: center;
						
						.icon_container {
							
							display: flex;
							gap: 15px;
							align-items: center;							
							svg {
								width: calc(clamp(2.375rem, 0.875vw + 2.047rem, 2.813rem)); //38 - 45
								height: auto;
								display: block;
								
								path {
									fill: #0056A2;
								}
							}
						}
						
						.schwer_entflammbar_hint {
							width: 100%;
						}
						
					}
					
					.property_name.funktionen_name {
						align-self: start;
					}
					
					.property_value.funktionen_value {
						flex-wrap: wrap;
						align-items: start;
						flex-direction: column;
						
						.icon_container {
							.icon_title {
								display: block;
								visibility: visible;
							}
						}
					}
				}
				
				.firetests, .careinstructions, .certificates {
					display: flex;
					flex-direction: column;
					gap: 10px;

					.button {
						width: fit-content;
					}

					.download {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						gap: 5px;
						align-items: center;
					}

					.download::before {

						content:'';
						display: inline-block;

						height: 1.1em;
						aspect-ratio: 16/13;
						margin-right: 0.5em;

						background-color: #ffffff;

						mask-image :url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" fill="none"><path stroke="%23fff" d="M8.188 0v8M3.98 4l4.206 4.205L12.393 4M0 13.148h16"/></svg>');
						mask-position: center;
						mask-repeat: no-repeat;
						mask-size: 100% 100%;

					}
				}
			}
		}
		
	}
	
	.hpk_product_list{
		margin-top: calc(clamp(1.875rem, 5.303vw - 0.114rem, 6.25rem)); // 30px - 100px
	}
	
}

@media screen and (min-width: 56.25rem){
	.mod_hpk_product_detail{
		
		.hpk_product_detail {
			
			grid-template-columns: 1fr 1fr;
			column-gap: calc(clamp(1.25rem, 3.788vw - 0.17rem, 4.375rem)); // 20px - 70px
			
			.detail_content_wrapper {
				
			}
			
			.detail_content_wrapper {
				.hpk-details-accordion {
					.properties_list, .fabric-properties {
						.property_value.funktionen_value {
							
							flex-wrap: wrap;
							flex-direction: row;
							
							.icon_container {
								.icon_title {
									display: none;
									visibility: hidden;
								}
							}
						}
					}
				}
			}
			
		}
		
	}
}