************
	/* CSS REMEDY */
	/**************/
	*, *::after, *::before {
	box-sizing:border-box;  
	}

	html, body {
		margin: 0;
		padding: 0;
		scroll-behavior: smooth;
	}
	



	/*********************/
	/* CUSTOM PROPERTIES */
	/*********************/
	:root {
		/* startje */
		--color-text:#111;
		--color-background:#fff;
		--color-lines:#111;

		--menu-padding: 1em 0.5em;

		--link-decoration: none;
	}


	/*********************/
	/* HAMBURGER MENU */
	/*********************/


/* Paneel voor HEREN (3e ul) en SNEAKERS (4e ul) schuiven in over het hoofdmenu */
header nav > ul:nth-of-type(3),
header nav > ul:nth-of-type(4) {
  position: absolute;
  inset: 0;
  background: #fff;
  overflow-y: auto;

  translate: 100% 0%;
  transition: translate .3s;
}

/* HEREN schoenen-menu in beeld */
header nav.toonMannenSchoenen > ul:nth-of-type(3) {
  translate: 0% 0%;
  z-index: 6;
}

/* HEREN sneakers-menu in beeld */
header nav.toonMannenSneakers > ul:nth-of-type(4) {
  translate: 0% 0%;
  z-index: 7;
}


header {
	display:flex;
	flex-wrap: wrap;
	position:sticky;

	z-index: 1;
	padding: 0;
}
		
/*logo in de hamburger menu*/
nav img {
	display: block;
	width:18%;
	margin: 0 auto;
	}




/* MENU knop */
header button {
	order:-1;
	font:inherit;
	background:none;
	border: 0;	
}

/* sluitknop rechtsboven */
nav > button {
	position: absolute;
	top: 1em;
	right: 1em;
	font-size: 1.5em;
}

	/* hoofdmenu*/
	header nav {
		position:fixed;
		overflow-y: auto;   
		left:0;
		right:0;
		top:0;
		bottom:0;
	
		background:white;
		
		translate:-100% 0%;
		transition:translate .3s;
	}
	
	/* als menu open is */
	nav.toonMenu {
		translate:0% 0%;
		z-index: 5;
	}
	
	header nav ul {
		list-style:none;
	}

	header nav a {
		display:block;
		padding: var(--menu-padding);
		text-decoration:none;
		color:#111;
	}
	
	header nav p {
		padding: 1em 1em;
	}
	

header div button {
display: block;
width: 100%;
padding: 1.0em;
font-weight: 700;

background-color: black;
color: var(--color-background);
}
	

/***********************
  iconen/header + promobalk
***********************/

/* uitklapcontent standaard dicht eerst */
header  div  p {
  margin: 0.0em;
  padding: 0.0em 1.0em;
  max-height: 0.0em;
  overflow: hidden;
}


/* Iconen - svg */
header:first-of-type > ul {
	display: grid;
	list-style: none;

	margin: 0.0em;
	padding: 0.4em 0.4em; 
	              
	grid-template-columns: repeat(7, 1fr); 
  }
  
  /* plaatsing svg binnen grid */
  header:first-of-type > ul > li:nth-child(1) { grid-column: 1; }
  header:first-of-type > ul > li:nth-child(2) { grid-column: 2; }
  header:first-of-type > ul > li:nth-child(3) { grid-column: 4;} /* logo */
  header:first-of-type > ul > li:nth-child(4) { grid-column: 6; }
  header:first-of-type > ul > li:nth-child(5) { grid-column: 7; }
  header:first-of-type > ul > li:nth-child(6) { grid-column: 8;} /* helemaal rechts */
 
/*hamburger icoon - apparte styling */
header:first-of-type > ul > li:nth-child(1) svg {
	height: 2em;   
	width: auto;
	margin-right: 0.5em;
} 

/* HART icoon - apparte styling */
header:first-of-type > ul > li:nth-child(5) svg,
header:first-of-type > ul > li:nth-child(2) svg {
	height: 2em;   
	width: auto;
} 

/* LOGO - apparte styling */
header:first-of-type > ul > li:nth-child(3) svg {
	height: 2em;   
	width: auto;   
	margin-left: 1.9em; 
}
  



	/*********************/
	/* section 1 /liverpool foto */
	/*********************/

	/* de foto juist positioneren */
	section:first-of-type{
		position: relative;
		margin: 0 auto;
	}


	section:first-of-type img{
		display: block;
		width: 100%;
	}
	

	/* h1 op de foto positioneren en stylen */
	section:first-of-type  h1 {
		position: absolute;      /* legt hem bovenop de foto */
		left: 0.3em;
		bottom: 6.5em;          
		padding: 0.1em 0.3em;      /* ruimte tussen tekst en witruimte */

		background: #fff;        
		
		text-transform: uppercase;
		font-family: 'Bebas Neue', sans-serif;
		font-size: 1.2em;
		font-weight: 400; 
	}

	/* p op de foto positioneren en stylen */
	section:first-of-type p:nth-of-type(1) {
		position: absolute;
		left: 0.5em;
		bottom: 9.8em; 
		padding: 0.1em 0.4em;     
		
		width: 62%;          
		display: block;
	
		background: #fff;
	
		font-family: sans-serif;
		font-size: 0.7em;
		font-weight: 400;
	}
	
	
	section:first-of-type p:nth-of-type(2){
		position: absolute;
		left: 0.5em;
		right: 0.5em;
		bottom: 8em; 
		padding: 0.2em 0.4em;
			
		width: 65%;           
		display: block;

		background: #fff;
	
		font-family: sans-serif;
		font-size: 0.7em;
		font-weight: 400;
	}

	/* knoppen op de foto positioneren en stylen*/
	section:first-of-type div {
		position: absolute;
		bottom: 3.5em;
		
		left: 41%;
		transform: translateX(-50%); 
	
		width: 80%;         /* totale rij smaller -> past op scherm */
		display: flex;
		gap: 0.3em;
	}
	
	section:first-of-type div a {
		flex: 1;                   /* verdeelt de ruimte gelijk over alle knoppen */
		padding: 0.5em 0.3em;

		border: 0.125em solid #111;
		
		background: #fff;
		color: var(--color-text);
		text-decoration: var(--link-decoration);

		font-family: sans-serif;
		font-size: 0.7em;
		font-weight: 600;
	}
	


	/*********************/
	/* section 2 /1e keer categorie kiezen */
	/*********************/

	/* titel */
	section:nth-of-type(2) h2 {
		margin-left: 0.7em;

		letter-spacing: 0.2em;
		font-weight: 700;

		font-family: 'Bebas Neue', sans-serif; 
		font-size: 1.7em;
	}

	/* lijst van 4 foto's in 2 kolommen */
	section:nth-of-type(2) ul {
		display: grid;
		grid-template-columns:repeat(2, 1fr);
		
		list-style: none;

		width: 90%; 
		gap: 0.3em;

		padding: 0;
		margin: 0 auto 2em;  
					
	}
	
	/* elke foto appart */
	section:nth-of-type(2) li a {
		display: block;              
		position: relative;         

		color:var(--color-text);
	}
	
	/* foto vult hele tegel */
	section:nth-of-type(2) li a img {
		display: block;
		width: 100%;
		height: auto;
	}
	
	/* label onderin de foto */
	section:nth-of-type(2) li a p {
		position: absolute;
		left: 0.5em;
		bottom: 0.5em;
	
		margin: 0;
		padding: 0.2em 0.4em;
		background: #fff;

		font-weight: 600;
		font-size: 0.9em;
		font-family: sans-serif;
	}
	

	/*********************/
	/* section 3 / MEGARIDA */
	/*********************/
	section:nth-of-type(3){
		position: relative;
		margin: 0 auto;
	}
	
	section:nth-of-type(3) img{
		display: block;  /* nog na checken of dat echt nodig is*/
		width: 100%;
	}
	
	/* titel */
	section:nth-of-type(3) h2{
		position: absolute;

		left: 0.3em;
		bottom: 5.5em;
		margin: 0;
		padding: 0.1em 0.3em;
	
		background: #fff;
		
		letter-spacing: 0.08em; 
		font-family: 'Bebas Neue', sans-serif;
		font-size: 1.2em;
		font-weight: 400;
	}
	
	/* tekst */
	section:nth-of-type(3) p{
		position: absolute;
		display: block;

		left: 0.5em;
		bottom: 7.6em;
		padding: 0.1em 0.4em;
		margin: 0;
	
		width: 25%;
		background: #fff;
	
		font-family: sans-serif;
		font-size: 0.7em;
		font-weight: 400;
	}
	
	/* knoppen-container */
	section:nth-of-type(3) div{
		position: absolute;
		display: flex;

		bottom: 2em;
		left: 35%;
		transform: translateX(-50%);   
	
		width: 67%;
		gap: 0.3em;
	}
	
	/* knoppen zelf */
	section:nth-of-type(3) div a{
		flex: 1;
		padding: 0.4em 0.3em;
	
		border: 0.125em solid #111;
		background: #fff;
		color: #111;
		text-decoration: none;
	
		font-family: sans-serif;
		font-size: 0.9em;
		font-weight: 600;
	}
	




	/*********************/
	/* section 4 /2e keer categorie kiezen */
	/*********************/

	/* titel */
	section:nth-of-type(4) h2{
		margin-left: 0.8em;

		letter-spacing: 0.2em;
		font-weight: 700;
	
		font-family: 'Bebas Neue', sans-serif; 
		font-size: 1.7em;
	}
	
	/* lijst van 4 foto's in 2 kolommen */
	section:nth-of-type(4) ul {
		display: grid;
		grid-template-columns:repeat(2, 1fr);
		
		list-style: none;
	
		width: 90%; 
		gap: 0.3em;
	
		padding: 0;
		margin: 0 auto 2em;  
	}
	
	/* elke foto apart */
	section:nth-of-type(4) li a {
		display: block;              /* maakt de hele tegel klikbaar */
		position: relative;          /* anker voor het label (p) */
	
		color:var(--color-text);
	}
	
	/* foto vult hele tegel */
	section:nth-of-type(4) li a img {
		display: block;
		width: 100%;
		height: auto;
	}
	
	/* label onderin de foto */
	section:nth-of-type(4) li a p {
		position: absolute;
		left: 0.5em;
		bottom: 0.5em;
	
		margin: 0;
		padding: 0.2em 0.4em;
		background: #fff;
	
		font-weight: 600;
		font-size: 0.9em;
		font-family: sans-serif;
	}
	

	/*********************/
	/* section 5 – productenlijst */
	/*********************/

	/* het productgrid */
	section:nth-of-type(5) ul:nth-of-type(2) {
		display: grid;
		grid-template-columns: repeat(2, 1fr ); 
		gap: 0.6em;                    
		width: 90%;  

		margin: 0 auto;                 
		padding: 0;    
		list-style: none;           
	}

	section:nth-of-type(5) ul:nth-of-type(2) li {
		position: relative;               /*om het hartje op foto te krijgen*/

	}
	
	section:nth-of-type(5) ul:nth-of-type(2) img {
		width: 100%;
	}
	
  /* plaatsen van hartje rechts boven  */
  section:nth-of-type(5) ul:nth-of-type(2) li > button {
	all: unset;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 2.0em;
	height: 2.0em;
  }
  






	
	/* scrolbaar maken van knoppen */
	section:nth-of-type(5) ul:nth-of-type(1){
		display:flex;
		gap:0.6em;
		overflow:auto;
		
		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
		overscroll-behavior-x:contain;  
		
		padding:0.1em 0.1em;
		padding-left: 1em;
		scrollbar-width:none; /* verbergt scrollbar */

		list-style: none;
	}
	
	/* knoppen vormgeving*/
	section:nth-of-type(5) ul:nth-of-type(1) button{
		scroll-snap-align:center;
		padding:0.4em 0.6em;

		border:0.02em solid grey;
		background: var(--color-background);
		color:var(--color-text);
		white-space:nowrap;    /* zo onstaat er geen regel */
		
		font-family: 'Helvetica Neue', Arial, sans-serif;
		font-size: 1em;
		font-weight: 400;
	}
	

	/* Alles bekijken knop*/
	section:nth-of-type(5) > a {
		display: block;

		width: 90%;  
		margin: 0.5em auto;
		padding: 0.8em 0.05em;
		text-indent: 0.7em; 
	
		border: 0.08em solid #000;
		border-bottom: none;
	
		text-decoration: var(--link-decoration);
		color: var(--color-text);

		font-family: 'Helvetica Neue', Arial, sans-serif;
		font-size: 1em;
		font-weight: 550;
		text-align: left;
	}
	

	main section:nth-of-type(5) h2{
			display: none;	  
	}
	


	/*********************/
	/* section 6 – carousel met bekendheden */
	/*********************/

	/* carrousel */
	section:nth-of-type(6) ul {
		display:flex;
		overflow:auto;   

		scroll-snap-type:x mandatory;      
		scroll-behavior:smooth;
		overscroll-behavior-x:contain;

		gap:0.3em;
		padding: 0.5em 0.75em;               
		margin-top:3.5em;

		list-style:none;
		scrollbar-width:none;          
	}
	
	/*tonen van 1 foto en deel van ander  */
	section:nth-of-type(6) li {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 78%;

		scroll-snap-align:center;
	}
	
	section:nth-of-type(6) li a {
		color:var(--color-text);
		text-decoration:var(--link-decoration);
	}
	
	section:nth-of-type(6) img {                
		width:100%;
	}
	
	/* h3 onder de foto */
	section:nth-of-type(6) li a h3 {
		font-family:'Helvetica Neue', Arial, sans-serif;
		font-weight:700;
		font-size:1.1em;
		line-height:1.2;
	}
	
	/* beschrijving */
	section:nth-of-type(6) li a p {
		font-family:'Helvetica Neue', Arial, sans-serif;	
		font-size: 0.990em;
		line-height:1.5;
		color:var(--color-text);
	}
	
	/* Shop nu */
	section:nth-of-type(6) span{
		font-family:'Helvetica Neue', Arial, sans-serif;	
		font-weight:700;
		text-decoration:underline;
		text-underline-offset:0.5em;    /*hoe moet ik gpt bron hiervan noteren*/
	}
	

	/*********************/
	/* section 7 – apps carousel */
	/*********************/

	/* titel */
	section:nth-of-type(7) h2{
		margin-left: 0.4em;

		letter-spacing: 0.2em;
		font-weight: 600;
	
		font-family: 'Bebas Neue', sans-serif; 
		font-size: 1.9em;
	}
	
	/* carousel van de apps */
	section:nth-of-type(7) ul{
		display:flex;
		overflow:auto;

		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
		overscroll-behavior-x:contain;

		gap:0.3em;
		padding:0.5em 0.75em;
		
		list-style:none;
		scrollbar-width:none;   /*moet weg */
	}
	
	/* tonen van 1 foto en deel van ander */
	section:nth-of-type(7) li{
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 50%;

		scroll-snap-align:center;
	}
	
	/* klibaar linkje */
	section:nth-of-type(7) li a{
		position:relative;     

		text-decoration:var(--link-decoration);
		color:var(--color-lines);
	}
	
	section:nth-of-type(7) img{
		width:100%;
	}
	
	/* label links onder */
	section:nth-of-type(7) li a p{
		position:absolute;
		left:1em;
		bottom:0.5em;
		padding:0.4em 0.6em;
		
		background:var(--color-background);
		
		font-family:sans-serif;
		font-weight:600;
		font-size:0.9em;
	}


		/*********************/
	/* section 8 – dropdown */
	/*********************/

	section:nth-of-type(8) {
		padding: 0 2em;
		margin-bottom: 4.3em;
	}
	
	/* lijn voor dropdown */
	section:nth-of-type(8) details {
		border-top: 1px solid #ddd;
	}
	
	section:nth-of-type(8) details:last-of-type {
		border-bottom: 1px solid #ddd;
	}
	
	/* titel */
	section:nth-of-type(8) summary {
		display: flex;
		justify-content: space-between;  /*ruimte tussen span en tekst*/
	
		padding: 1em 0;
		
		font-family:'Helvetica Neue', Arial, sans-serif;	
		font-size: 1em;
		font-weight: 700;
		color: var(--color-text);
	}
	
	/* pijltje rechts in summary */
	section:nth-of-type(8) span {
		font-size: 1em;
		transition: transform 0.2s;
	}
	
	/* draai het pijltje als open */
	section:nth-of-type(8) details[open] summary span {
		transform: rotate(180deg);
	}
	
	/* dropdown */
	section:nth-of-type(8) ul {
		list-style: none;
		padding:0;
	}
	
	/* linkjes in de lijst */
	section:nth-of-type(8) li a {
		color:var(--color-text);
		text-decoration:var(--link-decoration);
		font-size: 1em;
		line-height: 3.2em;
	}
	
	section:nth-of-type(8) li a:hover {
		text-decoration: underline;
	}

	section:nth-of-type(8) h2 {
		width: 0.1em;
		height: 0.1em;
		overflow: hidden;
	}
	
	
	/*********************/
	/* section 9 – footer artikel */
	/*********************/

	section:nth-of-type(9){
		background:#000;       
		color:#fff;            
		padding:2em 1em;        
	}
	
	section:nth-of-type(9) h2{
		text-align:center;
		letter-spacing:0.1em;
		line-height:1;
		margin-top: 1.5em;

		font-family:'Bebas Neue', sans-serif;
		font-weight:500;
		font-size:2em;
	}

	section:nth-of-type(9) p{
		text-align: justify;
		line-height:1.6;
		font-family:sans-serif;
		font-size:0.96em;
	}
	
	/* logo onderaan*/
	section:nth-of-type(9) img{
		display:block; 
		padding-bottom: 2.5em;     
		width:18%;         
		margin:0 auto;         
	}
	




	/*********************/
	/* section 10 - jou mening telt*/
	/*********************/
	section:nth-of-type(10){
		background:#eef2f5;        
		padding:1.2em 1em 0;      
	}
	
	/* titel */
	section:nth-of-type(10) h2{
		letter-spacing:0.2em;
		font-family:'Bebas Neue', sans-serif;
		font-weight:lighter;
		font-size:1.6em;
	}
	
	/* korte tekst */
	section:nth-of-type(10) p{
		margin:0 0 1.2em 0;
		font-family:sans-serif;
		font-size: 0.9em;
		color:gray;        /*doet het niet*/
		color:var(--color-text);
		
	}
	
	
	section:nth-of-type(10) li a{
		color:#fff;
		text-decoration:none;
		font-family: sans-serif;
		font-size: 0.7em;
		font-weight: 700;
	}
	
	





	/*********************/
	/* section 11 - Word lid */
	/*********************/

	footer section:first-of-type{
		background:#3b7b68;
		color:#fff;
		text-align:center;
		padding:2em 1em;
	}
	
	/*titel */
	footer section:first-of-type h2{
		margin-top: 0.4em;
		padding-bottom: 0.6em;

		letter-spacing:0.180em;
		
		font-family:'Bebas Neue', sans-serif;
		font-weight:600;
		font-size:1.8em;
	}
	
	/* meld je aan knop */
	footer section:first-of-type a {
		position: relative;   /*nodig voor de ::after*/

		padding:1.3em 0.6em;

		background:#fff;
		color:#111;      
		
		text-decoration:none;
		text-transform:uppercase;

		font-size: 0.9em;
		letter-spacing:0.04em;
		font-family: sans-serif;
		font-weight:700;
	}
		
	/* tweede lijn achter de knop */
	footer section:first-of-type a:after {
		content: "";
		position: absolute;
		top: 0.2em;
		left: 0.2em;
		width: 100%;
		height: 100%;
		border: 1px solid white;  
	}



	/*********************/
	/* footer nav*/
	/*********************/

	footer nav:nth-of-type(2){
		display:grid;
		background:#000;
		
		grid-template-columns:repeat(2, 1fr 1fr);
		gap:0.8em 2em;        
		
		padding:2em 4.5em;
	}

	footer nav:nth-of-type(2) ul {
		padding: 0;
	}
	
	footer nav:nth-of-type(2) ul li:not(:last-child){
		margin:0 0 2.7em;
	}
	
	footer nav:nth-of-type(2) a{
		color:#fff;
		text-decoration:none;
		font-family:sans-serif;
		font-size:0.8em;
		font-weight:500;
		line-height:1.4;
	}

	footer nav:nth-of-type(2) p {
		grid-column: 1 / -1;     
		max-width: 80%;  

		color: #fff;
		font-family: sans-serif;
		font-size: 0.8em;
		line-height: 1.5;
		text-align: left;
	}

	footer nav:nth-of-type(2) a:hover{
		text-decoration:underline;
	}

	footer nav:nth-of-type(1) {
	display:flex;
	justify-content:space-around;
	align-items:center;

	padding:1em 0;

	color: white;
	background:#000;
	}

	footer nav:nth-of-type(1) a {
	color: white;
	text-decoration: var(--link-decoration);
	font-weight: bold;	
	}

	/*********************/
	/* footer - beleid*/
	/*********************/

	footer {
		background:#000;
	}
	
	/* de twee buttons */
	footer button{
		width:30%;
		padding:0.4em 0;
		margin-left: 3em;
		
		background:none;
		border:none;	
		text-align: left;
		border-bottom:0.15em solid white;   
		
		color:#fff;
		font-family:sans-serif;
		font-size:1em;
		font-weight:700;
	}
	
	/* footer - beleid links */
	footer > ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* twee kolommen */
	
	gap: 1.5em 0.4em;                           
	padding-left: 3em !important;
	padding: 2em 0;
	margin: 0;

	list-style: none;                      
	}

	footer > ul li a {
	color: #fff;
	text-decoration: var(--link-decoration);
	font-family: sans-serif;
	font-size: 0.95em;
	font-weight: 400;
	}

	footer > ul li a:hover {
	text-decoration: underline;
	}


	/*********************/
	/*DETAIL PAGINA*/
	/*********************/

	body.detailpagina main section:nth-of-type(1) h1{
	position: static;     /* haalt absolute weg */
	}
	
	body.detailpagina main section:nth-of-type(1) h1{
		margin: 1em 0;
        margin-bottom: -0.1em;
		margin-left: 0.2em;
		color:var(--color-text);

		font-family: sans-serif;
		font-weight:700;
		font-size:1.5em;
		line-height: 1.3;
		letter-spacing:0.04em;

	}

	body.detailpagina main section:nth-of-type(1) h2{ 
		font-family: sans-serif;
		letter-spacing:0.03em;
		font-size:1.1em;
		
		margin-left: 0.8em;
	}
		
	/* carrousel */
	body.detailpagina main section:nth-of-type(1) ul{
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	
		list-style: none;
		margin: 0;
		padding: 0;
	}

	body.detailpagina main section:nth-of-type(1) ul li{
		flex-grow: 0;                 
		flex-shrink: 0;               
		flex-basis: 100%;             
		scroll-snap-align: center;
	}
	
	/* afbeelding */
	body.detailpagina main section:nth-of-type(1) ul li img{
		width: 100%;
		height: auto;
	}
	


	/*********************/
	/* Kleuren (fieldset 1) */
	/*********************/

	/*lijn weg om de 1e fieldset*/
	body.detailpagina main form fieldset:nth-of-type(1){
		border:none;
		margin:0.8em;
	}
	
	/*kopje-kleuren*/ 
	body.detailpagina main form fieldset:nth-of-type(1) legend{
		margin:0.4em -0.2em;

		font-family:sans-serif;
		font-weight:600;
		font-size:0.98em;

		letter-spacing:0.03em;
	}
	
	/*foto's op een rij*/ 
	body.detailpagina main form fieldset:nth-of-type(1) ul{
		display:flex;
		gap:0.6em;
		list-style:none;
		margin:0;
		padding:0;
	}
	
	/*radio buttons onzichtbaar maken*/ 
	body.detailpagina main form fieldset:nth-of-type(1) label input{
		position:absolute;
		opacity:0;
	}

	/*lijn onder foto + foto grootte*/ 
	body.detailpagina main form fieldset:nth-of-type(1) label img{
		width:105%;
		height:auto;
		border-bottom:0.35em solid transparent;  
	}
	
	/*zwarte onderlijn wordt zichtbaar als die gecheckd is */
	body.detailpagina main form fieldset:nth-of-type(1) label:has(input:checked) img{
		border-bottom-color:black;
	}

	/* fieldset 1 – eerste p*/
	body.detailpagina main form fieldset:nth-of-type(1) p:nth-of-type(1){
		margin: 0.4em 0;
		font-family: sans-serif;
		font-size: 0.8em;
		color: #444;
	}
	
	/* fieldset 1 – tweede p*/
	body.detailpagina main form fieldset:nth-of-type(1) p:nth-of-type(2){
		margin: 1em 0;
		font-family: sans-serif;
		font-size: 0.87em;
		color: black;
		line-height: 1.3;
	}
	
	

	/*********************/
	/* Matentabel (fieldset 2) */
	/*********************/

	body.detailpagina main form fieldset:nth-of-type(2){	
		margin:0.5em;
		padding:0;
		border: none;
	}
	
	/*kopje-maten */
	body.detailpagina main form fieldset:nth-of-type(2) legend{
		margin:0.8em -0.2em;

		font-family:sans-serif;
		font-weight:600;
		font-size:0.98em;
		letter-spacing:0.03em;
	}
	
	/* grid voor maten tabel */
	body.detailpagina main form fieldset:nth-of-type(2) ul{
		display:grid;
		grid-template-columns: repeat(4, 1fr);
		
		list-style:none;

		gap:0.4em;
		margin:0;
		padding:0;
	}
	
	/* radio button verbergen */
	body.detailpagina main form fieldset:nth-of-type(2) label input{
		position:absolute;
		opacity:0;
	}
	
	/* maten individueel */
	body.detailpagina main form fieldset:nth-of-type(2) label{
		display:block;
		padding:0.9em 0.6em;
		text-align:center;
	
		background:#eef2f5;           
	
		font-family:sans-serif;
		font-size:0.8em;
		font-weight:200;
		color:#111;
	}

	/* gekozen maat - zwart met witte tekst */
	body.detailpagina main form fieldset:nth-of-type(2) label:has(input:checked){
		background:black;
		color: white;
	}
	
	/* info-box onder het maten tabel */
	body.detailpagina main form fieldset:nth-of-type(2) p{
		display: inline-flex;
		gap: 0.5em;

		margin:0.9em 0;
		padding:0.9em 0.5em;
		border:0.1em solid #000;

		font-family:sans-serif;
		font-size:0.9em;
		color:var(--color-text);
		line-height:1.4;
	}

	body.detailpagina main form fieldset:nth-of-type(2) svg {
		height: 1.7em;
		margin-left: 1em;
	}
	
	

	/*********************/
	/* in winkelwagen knop*/
	/*********************/


	/*de h2 verbergen */
	body.detailpagina main section:nth-of-type(2) h2 {
		display: none;
	}

	/*padding en flex voor om de knop*/
	body.detailpagina main section:nth-of-type(2){
		display: flex;
		flex-wrap: wrap;   /*wat doet dit*/
		gap: 0.8em 1em;
		padding: 0 1em;
	}
	
	/* winkelwagen knop */
	body.detailpagina main section:nth-of-type(2) button:nth-of-type(1){
		flex: 1 1 73%;      /*wat doet dit precies*/
		padding: 0.8em 1em;
		background: #000;
		color: #fff;
		border: none;

		position: relative;    /*wat doet deze hier*/
		display: inline-flex;
		align-items: center;
		text-align: left;

		font-family: sans-serif;
		font-size: 1em;
		font-weight: 700;
	}
	
	/* lijn achter de winkelwagen knop */
	body.detailpagina main section:nth-of-type(2) button:nth-of-type(1)::after{
		content: "";
		position: absolute;
		top: 0.2em;
		left: 0.2em;
		width: 100%;
		height: 100%;
		border: 0.07em solid #000;
	}
	
	/* winkelwagen-icoon */
	body.detailpagina main section:nth-of-type(2) button:nth-of-type(1) svg{
		margin-left: auto;
		width: 2em;
		border: none;
	}

	/* kleur van winkelwagen-icoon */
	body.detailpagina main section:nth-of-type(2) button:nth-of-type(1) svg path{
		fill: #fff;
	}
	
	/* wishlist-knop - buitenste rand */
	body.detailpagina main section:nth-of-type(2) button:nth-of-type(2){
		height: 4em;
		background: #fff;
		border: 0.07em solid #000;
	}
	
	/* hart-icoon grootte etc */
	body.detailpagina main section:nth-of-type(2) button:nth-of-type(2) svg{
		width: 2.6em;
		height: 3em;
		background: none;
	}

	body.detailpagina main section:nth-of-type(2) button:nth-of-type(2) svg path{
		fill: black;
		stroke: #000;
		stroke-width: 0.01em;
	}
	
	/* p - onder de winkelwagen knop */
	body.detailpagina main section:nth-of-type(2) p{
		margin-top: 0.45em;
		color: rgb(88, 87, 87);
	
		font-family: sans-serif;
		font-size: 0.85em;
		line-height: 1;
	}

	body.detailpagina main section:nth-of-type(2) p a {
		text-decoration: underline;
		color: gray;
	}
	
	/*********************/
	/*verzending + betaling linkjes*/
	/*********************/

	/* Verzendinfo - lijst onder elkaar */
	body.detailpagina main section:nth-of-type(2) ul{
		width: 100%;
		display: block;        
	}
	
	/* Bezorgdata-knop */
	body.detailpagina main section:nth-of-type(2) button:nth-of-type(3){
		width: 100%;
		background: none;
		border: none;
		padding: 0.8em 0;
	
		border-top: 0.08em solid #e5e5e5;
		border-bottom: 0.08em solid #e5e5e5;
	
		display: flex;
		gap: 0.6em;
		text-decoration: underline;
	
		font-family: sans-serif;
		font-size: 0.95em;     
		font-weight: 700;
		color: var(--color-text);          
	}
	
	/* icoon- bezorgdata (grootte)*/
	body.detailpagina main section:nth-of-type(2) button:nth-of-type(3) svg{
		width: 1.1em;        
		height: 1.4em;
	}
	
	/*grootte li en breedte*/
	body.detailpagina main section:nth-of-type(2) ul li{
		padding: 0.6em 0;
		width: 100%;
	}

	/*laatste lijn onder verzend info*/
	body.detailpagina main section:nth-of-type(2) ul li:last-child{
		padding-bottom: 4.5em; 
	}
	
	/* styling p en afstand svg->p */
	body.detailpagina main section:nth-of-type(2) ul li p{
		display: flex;
		align-items: center;

		gap: 0.6em;
		margin: 0;
	
		font-family: sans-serif;
		font-size: 0.95em;      
		font-weight: 700;
		color:var(--color-text);            
		text-decoration: underline;
	}

	
	/*********************/
	/*dropdowns*/
	/*********************/

	/* lijnen onder dropdowns */
	body.detailpagina main details{
		border-top: 0.09em solid #e5e5e5;
	}

	body.detailpagina main details:last-of-type{
		border-bottom: 0.09em solid #e5e5e5;
	}
	
	/* kopje - summary  */
	body.detailpagina main summary{
		display: flex;
		justify-content: space-between;  
	
		padding: 1.875em 0.9375em;      
	
		font-family: sans-serif;
		font-size: 1em;
		font-weight: 700;
		color: var(--color-text);
	}
	
	/*svg - pijltje */
	body.detailpagina main summary svg{
		width: 2.1em;
		height: 2.5em;

		stroke: #000;
		stroke-width: 0.04em;
		transition: transform 0.2s;
	}

	body.detailpagina main details[open] summary svg{
		transform: rotate(180deg);
	}
	
	/* inhoud van de dropdown */
	body.detailpagina main details h2{
		margin: 1em 0.6em;
		font-family: 'Bebas Neue', sans-serif;
		font-size: 1.5em;
		font-weight: 800;
		letter-spacing: 0.03em;
		line-height:1.2;
	}

	body.detailpagina main details p{
		margin: 1em 1.2em;
		font-family: sans-serif;
		font-size: 1em;
		line-height: 1.55;
		color: var(--color-text);
	}
	
	/* bullet bij 2e dropdown */
	body.detailpagina main details ul{
		margin-top: -1em;
		line-height: 2.6;

		font-family: sans-serif;
		font-size: 1.1em;
		color: var(--color-text);
	}


		
/*********************/
/*maak je look helemal - carrousel*/
/*********************/
	
/* carrousel */
body.detailpagina main section:nth-of-type(3) ul {
	display: flex;
	overflow: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;

	gap: 0.1em;
	padding: 0.3em 0.4em;
	list-style: none;
}

body.detailpagina main section:nth-of-type(3) li {
		flex-basis: 62%;
		flex-shrink: 0;
		flex-grow: 0;
		scroll-snap-align: center;
}
	
/* linkjes */
body.detailpagina main section:nth-of-type(3) li a {
		color: var(--color-text);
		text-decoration: var(--link-decoration);
}
	
/* afbeeldingen */
body.detailpagina main section:nth-of-type(3) li a img {
		width: 98%;
		height: auto;
}

/* de p's - prijzen*/
body.detailpagina main section:nth-of-type(3) li a p {
		position: static;
		width: 100%;
		padding: 0;
		margin-top: 0.5em;

		font-family: 'Helvetica Neue', Arial, sans-serif;
		font-size: 0.95em;
		font-weight:bold;
		line-height: 1.7;
		color: var(--color-text);
}
	
/* de h3 - titels */
body.detailpagina main section:nth-of-type(3) li a h3 {
		width: 100%;
		margin: 0.4em 0;
		margin-top: -0.2em;

		font-family: 'Helvetica Neue', Arial, sans-serif;
		font-size: 0.95em;
		font-weight: 400;
		line-height: 1.5;	
		color: var(--color-text);
}
	
	/* span - originals */
body.detailpagina main section:nth-of-type(3) li a span {
		display: block;
		width: 100%;

		font-family: 'Helvetica Neue', Arial, sans-serif;
		font-size: 0.9em;
		font-weight: 400;
		color: #9a9a9a;
	}
	
body.detailpagina main section:nth-of-type(3) h2 {
	position: static;
	margin-top: 1.5em;
    letter-spacing: 0.09em;

	font-weight:200;
	font-family: 'Bebas Neue', sans-serif; 
	font-size: 2.1em;
	}



		
/*********************/
/*mischien vind je dit ook leuk - carrousel*/	
/*********************/

/* titel */
body.detailpagina main section:nth-of-type(4) h2{
	
	margin-top: 3em;
	margin-left: 0.38em;
	letter-spacing: 0.09em;

	font-weight:200;
	font-family: 'Bebas Neue', sans-serif; 
	font-size: 2.1em;
  }
  
body.detailpagina main section:nth-of-type(4) ul{
	display:flex;
	overflow:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	overscroll-behavior-x:contain;

	gap:0.6em;
	padding:0.4em 0.6em;
	margin:0;
	list-style:none;
  }
  
body.detailpagina main section:nth-of-type(4) li{
	flex-basis:50%;
	flex-grow: 0;
	flex-shrink: 0;
	scroll-snap-align:center;
  }
  
body.detailpagina main section:nth-of-type(4) li a{
	color:var(--color-text);
	text-decoration:var(--link-decoration);
  }
  
body.detailpagina main section:nth-of-type(4) li a img{
	width:100%;
	height: auto;
  }
  
/*de p's - prijzen*/
body.detailpagina main section:nth-of-type(4) li a p{
	position:static;
	margin:.4em 0 0;
	padding:0;

	font-family:'Helvetica Neue', Arial, sans-serif;
	font-size:0.95em;
	font-weight:bold;         
	line-height:1.7;
	color:var(--color-text);
  }
  
/* titel */
body.detailpagina main section:nth-of-type(4) li a h3{
	margin:0.4em 0;
	margin-top:-0.2em;

	font-family:'Helvetica Neue', Arial, sans-serif;
	font-size:0.95em;
	font-weight:400;
	line-height:1.4;
	
	color:var(--color-text);
  }
  
/* span - originals */
body.detailpagina main section:nth-of-type(4) li a span{
	display: block;
	width: 100%;

	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.9em;
	font-weight: 400;
	color: #9a9a9a;
  }
  




/*********************/
/*Geef jou mening*/	
/*********************/

body.detailpagina main section:nth-of-type(5){
	background:#eef2f5;        
	padding:1.2em 1em 0;      
}

/* titel */
body.detailpagina main section:nth-of-type(5) h2{
	display:block; 			
	letter-spacing:0.2em;
	font-family:'Bebas Neue', sans-serif;
	font-weight:lighter;
	font-size:1.6em;
}

/* korte tekst */
body.detailpagina main section:nth-of-type(5) p{
	margin:1.2em 0;
	font-family:sans-serif;
	font-size: 0.9em;
	color:gray;        /*doet het niet*/
	color:var(--color-text);
	
}

body.detailpagina main section:nth-of-type(5) a {
all: unset;


}