/* Algemene opmaak */

:root{
	--kolombreedte2: 200px;
	--button_hoogte : 125px;
	--bestelinformatie-achtergrond: #eee;
}

.titel {
	font-size: 1.1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
}

.titel_extra {
	margin-left: 10px;
}

.productinformatie {
	display: flex;
	border-top: 1px solid blue;
}

.productinformatie_kolom_1{
	display: flex;
	flex-direction: column;
	border-right: 1px solid blue;
}

.productinformatie_kolom_2{
	flex-direction: column;
	margin-top: 10px;
	padding: 0 5px 0 10px;
	align-items: center;
}

.breadcrumb {
  font-size: 0.7em;
  color: red;
  margin-bottom: 8px;
  margin-left: 5px;
}

.breadcrumb_link a {
	font-size: 1.0em;
	color: #0000FF;
	text-decoration: none;
}

.breadcrumb_link a:hover {
	color: #A0A0FF;
	text-decoration: underline;
}

/* Prijs sectie */
.bestelinformatie {
  display: flex;
  padding: 5px;
  min-height: 160px;
  max-height: 160px;
  box-sizing: border-box;
  flex: 1;
  border-bottom: 1px solid blue;
  position: relative; 
  justify-content: flex-end;
}

.bestel_hoofdfoto{
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 165px;
}

.bestel_foto {
	max-height: 150px;
	max-width: 150px;
	margin-right: 10px;
}

.bestelkolom_1, .bestelkolom_2 {
	font-size: 1.03em;
	position: relative; 
	padding: 12px;
}

.bestelkolom_1 {
	background-color: #ddd;
	width: 175px;
}

.bestelkolom_2 {
	max-width: 350px;
	width: 250px;
	align-items: right;
	flex-direction: column;
}

.bestelbutton {
    display: flex;
    justify-content: center; /* Horizontale uitlijning in het midden */
    align-items: center; /* Verticale uitlijning in het midden */
    width: 160px;
    height: 40px;
    font-size: 0.9em;
    border-radius: 5px;
    background-color: #1f65b5; 
    color: #eee;
    position: absolute;
    bottom: 5px;
    right: 12px;
	text-decoration: none;
}

.bestelbutton:hover{
	background-color: #5194E1;
	color: #fafafa;
	transition: background-color 0.3s ease;
}

.kwantum_info {
	font-size: 12px;
	position: absolute;
	bottom: 30px;
	right: 12px;
	margin: 0px;
}

.prijs {
  position: absolute;
  font-size: 25px;
  bottom: 0;
  right: 12px;
  margin: 0px;
  color: red;
}

.prijsafbeelding {
	flex: 1;
}

/* Afbeeldingen sectie */
.foto {
	display: flex;
    height: var(--button_hoogte);
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    /* border: 1px solid #ddd; */
    margin-bottom: 25px;
    box-sizing: border-box;
	width: 125px;
}

.foto img {
    max-height: 97%; 
    width: auto; 
    max-width: 95%;
	object-fit: cover;
}

.foto:hover{
	border: 1px solid black;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);	
}

/* Product specificaties  */
.specificaties {
	display: grid;
	grid-template-columns: 300px auto;
	gap: 5px; 
	padding: 5px;
}

.barcodes, .productstatus, .geschikt_voor, .fabrikant_link, .pdf_documenten {
	margin-right: 5px;
	margin-left: 5px;
}

.specificaties h2 {
  grid-column: span 2;
}

.specificaties h3,leftkolom {
  grid-column: 1;
  font-weight: bold;
  color: blue;
}

.specificaties :not(h2):not(h3):not(h4):not(leftkolom):not(nokolom) {
  grid-column: 2;
}

.specificaties h4,nokolom {
    grid-column: span 2; 
	margin-top: 0;
    font-weight: normal;
	li: unset;
}

.specificaties li {
    position: relative;
    padding-left: 1.2em; /* ruimte voor de bullet */
    text-indent: 0; 
    list-style: none; /* verwijder default bullet */
}

.specificaties li::before {
    content: "•";       /* bullet */
    position: absolute;
    left: 0;            /* links van het li-element */
    top: 0;
    color: black;       /* kleur bullet */
}

.specificaties a {
	color : red;
	transition: color 0.5s ease;
}

.specificaties a:hover {
	color: blue;
}

.terug:hover{
	color: red;
}

.compatibles {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
}

.compatibles div {
	width: 30%; 
	margin-bottom: 10px; 
}

/* Barcodes */
.barcode {
	display: flex;
	flex-wrap: wrap;
	margin-right: 10px;
	gap: 5px;
}

.barcode div {
	width: 22%;
}

/* PDF */
.pdflink, .fabrikant_link {
	margin-bottom: 5px;
}

.pdflink a, .fabrikant_link a {
	text-decoration: none;
	color: blue;
	transition: color 0.5s ease;
}

.pdflink a:hover, .fabrikant_link a:hover{
	text-decoration: underline;
	color: red;
}

.pdf_container, .fabrikant_container {
    display: flex;
    justify-content: left;
    align-items: center;
}

.pdflogo img, .urllogo img {
	height: 3em;
	margin: 0 20px 0 10px;
}

.pdf_lijst {
	align-items: bottom;
}

/* Media Query voor mobiele weergave */
@media only screen and (max-width: 768px) {

    body {
        font-size: 9px;
    }

    .container {
        padding: 3px;
        padding-bottom: 30px;
        border-bottom: 1px solid blue;
        width: 100%;
        padding-right: 5px;
        border-left: none;
        border-right: none;
    }

    h1 {
        font-size: 1.25em;
    }

    .productinformatie {
        flex-direction: column;
    }

    .productinformatie_kolom_1 {
        display: flex;
        flex-direction: column;
        border-right: 1px solid blue;
    }

    .productinformatie_kolom_2 {
        flex-direction: column;
        margin-top: 5px;
        padding: 0 5px 0 10px;
        align-items: center;
    }

    .zoeken {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .zoeken form {
        display: flex;
        align-items: center;
        padding: 5px;
    }

    label {
        margin-right: 5px;
    }

    .zoek-formulier {
        display: flex;
    }

    .zoek_button {
        margin-left: 10px;
    }

    /* Bestel informatie */

    .bestel_hoofdfoto {
        display: none; /* Hier zorgen we ervoor dat de hoofdfoto niet wordt weergegeven */
    }

	.bestelinformatie {
        display: flex; /* Zorg ervoor dat het blokelementen worden */
        padding: 5px;
        border-bottom: 1px solid blue;
        position: relative;
		min-height: 125px;
		max-height: 125px;
    }
	
	.container, .specificaties, .bestelinforatie, .productinformatie_kolom_1 {
		border-right: unset;
	}

    .bestelkolom_1,
    .bestelkolom_2 {
        width: 100%; 
        padding: 5px;
        margin-bottom: unset;
		font-size: 1.25em;
    }

	.prijs {
		margin: unset;
	}
	

    /* Product specificaties  */
    .specificaties {
        font-size: 1.2em;
        display: grid;
        grid-template-columns: 200px auto;
        gap: 5px;
        padding-bottom: 25px;
    }

    .specificaties h2 {
        grid-column: span 2;
    }

    .specificaties h3 {
        grid-column: 1;
        font-weight: bold;
    }

	.specificaties :not(h2):not(h3):not(h4):not(leftkolom):not(nokolom) {
	  grid-column: 2;
	}
	
	.specificaties h4 {
    grid-column: span 2; /* Zorg ervoor dat de h4-elementen over beide kolommen uitstrekken */
	margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

	
/* Afbeeldingen sectie */
    .productinformatie_kolom_2 {
        display: flex;
		height: unset;
		width: unset;
		flex-direction: unset;
		justify-content: center;
		flex-wrap: wrap; 
        margin: unset;
		padding: unset;
		margin: 5px;
    }

    .foto {
        display: flex;
		width: 90px;
		height: 90px;
		margin-bottom: 10px;
		justify-content: center;
		align-items: center;
    }
	
    .productinformatie_kolom_2 a {
        display: inline-block;
        margin-right: 10px; /* Optioneel: voeg wat ruimte toe tussen de afbeeldingen */
    }

}