@charset "utf-8";
@font-face {
    font-family: 'lg_ei_text_ttfsemibold';
    src: url('font2/lgeitextttf-semibold-webfont.woff2') format('woff2'),
         url('font2/lgeitextttf-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'lg_ei_text_ttf_regularregular';
    src: url('font2/lgeitextttf-regular-webfont.woff2') format('woff2'),
         url('font2/lgeitextttf-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'lg_ei_text_ttflight';
    src: url('font2/lgeitextttf-light-webfont.woff2') format('woff2'),
         url('font2/lgeitextttf-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'lg_ei_text_ttfbold';
    src: url('font2/lgeitextttf-bold-webfont.woff2') format('woff2'),
         url('font2/lgeitextttf-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*
=================
| Main settings |
=================
*/

html {
	height: 100%;
	overflow-x: hidden;
}

body {
	background-color: #fff;
	margin: 0px;
	font-family: 'lg_ei_text_ttf_regularregular';
	font-size: 1em;
	line-height: 1em;
	color: #000000;
	height: 100%;
	overflow-x: hidden;
	scrollbar-face-color: c40452;
	scrollbar-highlight-color: ffffff;
	scrollbar-3dlight-color: DDDDDD;
	scrollbar-darkshadow-color: 000000;
	scrollbar-shadow-color: 000000;
	scrollbar-arrow-color: FFffff;
	scrollbar-track-color: EEEEEE;

}

a {
	color: #c40452;
}

img {
  border: none;
}
.site {
	width: 100%;
	margin: 0px auto;
}
p {
	margin: 0em;
	padding: 0em;
}
td {
		font-size: 1.1em;
	line-height: 1.2em;
}
.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
/*
=================
| Header |
=================
*/
.header	 {
	width: 100%;
	background-color:#FFFFFF;
	}
.headerbox	 {
	width: 960px;
	background-color:#fff;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	position: relative;
	}

.headerlogo	 {
	width: 120px;
	height: 58px;
	background-image:url(../images/lglogo2015.jpg);
	float:left;
	margin-top:14px;
	cursor: pointer
	}
.headermenu	 {
	height: 30px;
	display:inline-block;
	float: right;
	margin-top:40px;
	font-size: 14px;
	line-height: 18px;
	text-align:right;
	color:#000000;
	text-transform:uppercase;
	}
.header-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 20px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }
.headermenu a	 {
	color:#000000;
	text-decoration:none;
	}
.headermenu a:hover	 {
	color:#c40452;
	text-decoration:none;
	}
.headerlang	 {
	height: 30px;
	display:inline-block;
	float: right;
	margin-top:38px;
	font-size: 12px;
	line-height: 18px;
	text-align:right;
	color:#000000;
	text-transform:uppercase;
	margin-left: 6px;
	}
.headerlangbox {
	background-color: FFFFFF;
	font-size: 13px;
	color: #000000;
	margin: 0px;
	padding: 1px;
}
.headervisual	 {
	width: 960px;
	background-color:#fff;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 10px;
	}
.headermainmenu	 {
	width: 960px;
	height: 37px;
	padding:0;
	margin-left:auto;
	margin-right:auto;
	}

.headermainmenusplit {
	height: 33px;
	width: 2px;
	background-color:#FFFFFF;
	}
.headermainmenucel {
	height: 33px;
	width: 33.33%;
	font-size: 18px;
	line-height: 20px;
	text-align: center;
	color:#c90050;
	text-transform:uppercase;
	padding-top: 4px;
	background-color:#dedfe1;
	cursor:pointer;
	border-right:#FFFFFF 2px solid;
	}

.headermainmenucel:hover {
	text-decoration:none;
	color:#fff;
	background-image: url("../images/LG_Electronics_Gradient2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	}

.headermainmenucel_select {
	height: 33px;
	width: 33%;
	font-size: 18px;
	line-height: 20px;
	text-align: center;
	text-transform:uppercase;
	padding-top: 4px;
	color:#fff;
	background-image: url("../images/LG_Electronics_Gradient.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	cursor:pointer;
	border-right:#FFFFFF 2px solid;
	}
.headerimagebank {
	height: 40px;
	width: 100%;
	font-family: 'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma;
	font-size: 24px;
	line-height: 30px;
	text-align: center;
	text-transform:uppercase;
	color:#fff;
	background-image: url("../images/LG_Electronics_Gradient.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	}


/*
=================
| Einde Header |
=================
*/

.centercontent {
	width: 100%;
	max-width: 960px;
	margin-left:auto;
	margin-right:auto;
	box-sizing: border-box;
	}

.pagetitle {
	font-size: 2.5em;
	line-height: 2em;
	text-align: center;
	color:#000000;
	margin-bottom: 0;
	margin-top: 10px;
	}

.pagesubtitle {
	font-family: 'lg_ei_text_ttfbold';
	font-size: 1em;
	line-height: 1em;
	text-align: center;
	color:#000000;
	margin-bottom: 20px;
	}
.pageconditions {
	font-size: 0.9em;
	line-height: 1.3em;
	text-align: left;
	color:#000000;
	}
.pageconditions a {
	text-decoration:none;
	color:#428bca;
	}
li{
	margin-bottom: 10px;
	}

.topictitle {
	font-family: 'lg_ei_text_ttfbold';
	font-size: 2em;
	line-height: 1em;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
	}

.topictext {
	font-family: 'lg_ei_text_ttf_regularregular';
	font-size: 1.1em;
	line-height: 1.2em;
	text-align: left;
	margin-bottom: 10px;
	margin-top: 10px;
	}
.topictextsmall {
	font-family: 'lg_ei_text_ttf_regularregular';
	font-size: 0.9em;
	line-height: 1em;
	text-align: left;
	margin-bottom: 10px;
	margin-top: 10px;
	}

ul {
	margin: 0;
	padding-top: 0;
	}

.topicsplit	 {
	width: 100%;
	height: 1px;
	background-color:#ccc;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 10px;
	margin-bottom: 10px;
	}

.registerbutton {
	height: 25px;
	width: 230px;
	font-size: 18px;
	line-height: 18px;
	vertical-align:middle;
	text-align: center;
	color:#fff;
	background-color:#c90050;
	text-transform:uppercase;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	cursor:pointer;
	}

/* Register */
  .form_textfield_1 { 
    background: white; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:30px; 
    width: 240px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 1.1em;
	padding-left: 10px;
   } 

  .form_textfield_2 { 
    background: white; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:30px; 
    width: 200px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 1.1em;
	padding-left: 10px;
   } 

  .form_textfield_3 { 
    background: white; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:30px; 
    width: 80px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 1.1em;
	padding-left: 10px;
   } 

  .form_textfield_4 { 
    background: white; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:30px; 
    width: 120px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 1.1em;
	padding-left: 10px;
   } 

  .form_textfield_5 { 
    background: white; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:30px; 
    width: 255px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 1.1em;
	padding-left: 10px;
   } 
  .form_textfield_6 { 
    background: white; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:30px; 
    width: 110px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 1.1em;
	padding-left: 10px;
   } 

  .form_button { 
    background: #c90050; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:35px; 
    width: 410px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:center;
	font-size: 1.1em;
	float:right;
	cursor:pointer;
   } 

  .form_button_print { 
    background: #c90050; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:35px; 
    width: 100%; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:center;
	font-size: 1.1em;
	cursor:pointer;
   } 

  .form_button_print2 { 
    background: #999999; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:35px; 
    width: 100%; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:center;
	font-size: 1.1em;
	cursor:pointer;
   } 

  .form_button_print2:hover { 
    background: #c90050; 
   } 

  .form_button2 { 
    background: #999999; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:35px; 
    width: 250px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:center;
	font-size: 1.1em;
	float:left;
	cursor:pointer;
   } 

  .form_button2:hover { 
    background: #c90050; 
   } 

  .form_button3 { 
    background: #999999; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:35px; 
    width: 250px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:center;
	font-size: 1.1em;
	float:right;
	cursor:pointer;
   } 

  .form_button3:hover { 
    background: #c90050; 
   } 

.smalltext {
	font-family: 'lg_ei_text_ttf_regularregular';
	font-size: 0.8em;
	line-height: 1.2em;
	text-align: left;
	}
.errorbox {
	width: 870px;
	font-size: 18px;
	line-height: 25px;
	font-family: 'lg_ei_text_ttfbold', Arial, Helvetica, sans-serif;
	vertical-align:middle;
	text-align: center;
	color:#fff;
	background-color:#c90050;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 20px;
	}

.errortext {
	font-family: 'lg_ei_text_ttfbold', Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1em;
	color: #c90050;
}
.errortext a {
	color: #c90050;
}
.importanttext {
	font-family: 'lg_ei_text_ttf_regularregular';
	font-size: 1.2em;
	line-height: 1em;
	color: #c90050;
}
  .form_print { 
    background: #fff; 
    border: 2px solid #c90050; 
    border-radius: 5px; 
    outline: none; 
	text-align:center;
	padding: 10px;
   } 

  .form_upload { 
    background: #f8f8f8; 
    border: 2px solid #c90050; 
    border-radius: 5px; 
    outline: none; 
	text-align:center;
	padding: 10px;
   } 

  .form_uploader { 
    background: #fff; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:30px; 
    width: 350px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#000000;
	font-size: 1em;
   } 
  .form_button_upload { 
    background: #c90050; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
    height:35px; 
    width: 120px; 
	font-family: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:center;
	font-size: 1em;
	float:right;
	cursor:pointer;
   } 
.errorbox_upload {
	font-size: 18px;
	font-family: 'lg_ei_text_ttfbold', Arial, Helvetica, sans-serif;
	vertical-align:middle;
	text-align: center;
	color:#fff;
	background-color:#c90050;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 15px;
	}

.confirmbox {
	font-size: 18px;
	font-family: 'lg_ei_text_ttfbold', Arial, Helvetica, sans-serif;
	vertical-align:middle;
	text-align: center;
	color:#fff;
	background-color:#50b848;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 15px;
	}

/*FOOTER*/
#footer {
	width: 100%; 
	height: 45px; 
	padding-top: 20px; 
	text-align: center; 
	font-size: 0.8em;
	color:#000000;

}
#footer a {
	color: #000; 
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}

@media (max-width: 1000px) {
.headerbox	 {
	width: 90%;
	}
.headervisual	 {
	width: 90%;
	}
.headermainmenu	 {
	width: 90%;
	}
.centercontent {
	width: 90%;
	}
}		

.headerlang	 {
	position: absolute;
	right: 0;
	top: 20px;
	height: 30px;
	display:inline-block;
	float: right;
	font-size: 12px;
	line-height: 14px;
	text-align:right;
	color:#333;
	text-transform:uppercase;
	margin: 0;
	padding: 0;
	}


.Tekst01 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 12px;	color: #999393;}
.Tekst02 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 12px;	color: #000000;}
.Tekst03 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 12px;	color: #C1004C;}
.Tekst04 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 12px;	color: #FFFFFF;}
.Tekst05 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 12px;	color: #999393;}
.Tekst06 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 12px;	color: #000000;}
.Tekst07 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 12px;	color: #C1004C;}
.Tekst08 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 12px;	color: #FFFFFF;}
.Tekst09 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #999393;}
.Tekst10 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #000000;}
.Tekst11 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #C1004C;}
.Tekst12 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #FFFFFF;}
.Tekst13 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #999393;}
.Tekst14 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #000000;}
.Tekst14  a:link {color: #000000; text-decoration: none; }
.Tekst14  a:hover {color: #C1004C; text-decoration: none; }
.Tekst14  a:visited {color: #000000; text-decoration: none; }
.Tekst14  a:active {color: #C1004C; text-decoration: none; }
.Tekst15 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #C1004C;}
.Tekst16 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #FFFFFF;}
.Tekst17 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #999393;}
.Tekst18 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #000000;}
.Tekst19 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #C1004C;}
.Tekst20 {font-family:  'lg_ei_text_ttf_regularregular',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #FFFFFF;}
.Tekst21 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #999393;}
.Tekst21  a:link {color: #999393; text-decoration: none; }
.Tekst21  a:hover {color: #C1004C; text-decoration: none; }
.Tekst21  a:visited {color: #999393; text-decoration: none; }
.Tekst21  a:active {color: #C1004C; text-decoration: none; }
.Tekst22 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #000000;}
.Tekst23 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #C1004C;}
.Tekst24 {font-family:  'lg_ei_text_ttfbold',Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #FFFFFF;}

.Titel01 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 24px;	color: #C1004C;}
.Titel02 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 14px;	color: #999393;}
.Titel03 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 14px;	color: #000000;}
.Titel04 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 14px;	color: #FFFFFF;}
.Titel05 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #C1004C;}
.Titel06 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #999393;}
.Titel07 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #000000;}
.Titel08 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 16px;	color: #FFFFFF;}
.Titel09 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 18px;	color: #C1004C;}
.Titel10 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 18px;	color: #999393;}
.Titel11 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 18px;	color: #000000;}
.Titel12 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 18px;	color: #FFFFFF;}
.Titel13 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 20px;	color: #C1004C;}
.Titel14 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 20px;	color: #999393;}
.Titel15 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 20px;	color: #000000;}
.Titel16 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 20px;	color: #FFFFFF;}
.Titel17 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 24px;	color: #C1004C;}
.Titel18 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 24px;	color: #999393;}
.Titel19 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 24px;	color: #000000;}
.Titel20 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 24px;	color: #FFFFFF;}
.Titel21 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 30px;	color: #C1004C;}
.Titel22 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 30px;	color: #999393;}
.Titel23 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 30px;	color: #000000;}
.Titel24 {font-family:  'lg_ei_text_ttfbold', Arial,Helvetica,Verdana,Tahoma; font-size: 30px;	color: #FFFFFF;}

/*
==========================================================================
| LG Imagebank vernieuwing 2026 — fase 1: designsysteem + header/footer |
| Nieuwe "lgib-" componenten leven naast de bestaande stijlen hierboven, |
| die nog gebruikt worden door de secties die nog niet vernieuwd zijn.  |
==========================================================================
*/

:root {
	--lgib-red: #c90050;
	--lgib-red-dark: #9e0040;
	--lgib-red-tint: #fbeaf1;
	--lgib-ink: #1a1a1a;
	--lgib-body: #333333;
	--lgib-muted: #767676;
	--lgib-bg: #faf8f5;
	--lgib-card: #ffffff;
	--lgib-border: #e6e2db;
	--lgib-radius: 12px;
	--lgib-radius-sm: 8px;
	--lgib-shadow: 0 2px 10px rgba(20, 20, 20, 0.06);
	--lgib-shadow-hover: 0 10px 28px rgba(20, 20, 20, 0.12);
	--lgib-maxwidth: 1180px;
	--lgib-font: 'lg_ei_text_ttf_regularregular', Arial, Helvetica, sans-serif;
	--lgib-font-bold: 'lg_ei_text_ttfbold', Arial, Helvetica, sans-serif;
}

body {
	background-color: var(--lgib-bg);
}

.lgib-container {
	max-width: var(--lgib-maxwidth);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* Buttons, reusable across alle latere fases */
.lgib-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: var(--lgib-radius-sm);
	padding: 10px 20px;
	font-family: var(--lgib-font-bold);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.lgib-btn--primary {
	background-color: var(--lgib-red);
	color: #ffffff;
}
.lgib-btn--primary:hover {
	background-color: var(--lgib-red-dark);
	color: #ffffff;
}
.lgib-btn--ghost {
	background-color: #ffffff;
	color: var(--lgib-red);
	border: 1px solid var(--lgib-red);
}
.lgib-btn--ghost:hover {
	background-color: var(--lgib-red-tint);
}
/* The legacy css/style.css sets a:link/a:visited/a:hover with a color
   that (by CSS specificity rules) beats a single .lgib-btn--xxx class
   on an <a>, which is why the primary button was showing red text on
   its red background. These higher-specificity, state-covering rules
   force the intended button colors regardless of link state. */
a.lgib-btn.lgib-btn--primary,
a.lgib-btn.lgib-btn--primary:link,
a.lgib-btn.lgib-btn--primary:visited,
a.lgib-btn.lgib-btn--primary:hover,
a.lgib-btn.lgib-btn--primary:active {
	color: #ffffff;
}
a.lgib-btn.lgib-btn--ghost,
a.lgib-btn.lgib-btn--ghost:link,
a.lgib-btn.lgib-btn--ghost:visited,
a.lgib-btn.lgib-btn--ghost:hover,
a.lgib-btn.lgib-btn--ghost:active {
	color: var(--lgib-red);
}

/* Header */
.lgib-header {
	background-color: #ffffff;
	border-bottom: 1px solid var(--lgib-border);
}
.lgib-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
}
.lgib-logo {
	display: block;
	line-height: 0;
}
.lgib-logo img {
	display: block;
	height: 44px;
	width: auto;
}
.lgib-search {
	display: flex;
	flex: 1 1 320px;
	max-width: 480px;
	margin: 0;
}
.lgib-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--lgib-border);
	border-right: none;
	border-radius: var(--lgib-radius-sm) 0 0 var(--lgib-radius-sm);
	padding: 0 14px;
	height: 40px;
	font-family: var(--lgib-font);
	font-size: 14px;
	color: var(--lgib-ink);
	outline: none;
	background-color: #ffffff;
}
.lgib-search__input:focus {
	border-color: var(--lgib-red);
}
.lgib-search__btn.lgib-btn {
	border-radius: 0 var(--lgib-radius-sm) var(--lgib-radius-sm) 0;
	height: 40px;
	padding: 0 20px;
}
.lgib-langswitch {
	display: flex;
	gap: 4px;
	margin-left: auto;
}
.lgib-langswitch a {
	padding: 7px 12px;
	font-family: var(--lgib-font-bold);
	font-size: 12px;
	letter-spacing: .03em;
	color: var(--lgib-muted);
	text-decoration: none;
	border-radius: 999px;
}
.lgib-langswitch a:hover {
	color: var(--lgib-red);
	background-color: var(--lgib-red-tint);
}
.lgib-langswitch a.is-active {
	color: #ffffff;
	background-color: var(--lgib-red);
}
.lgib-titlebar {
	background: linear-gradient(90deg, var(--lgib-red), #e2005f);
	color: #ffffff;
	text-align: center;
	padding: 12px 16px;
	font-family: var(--lgib-font-bold);
	font-size: 19px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Taalkeuze-landingspagina (index.asp) */
.lgib-hero {
	max-width: var(--lgib-maxwidth);
	margin: 24px auto 0;
	padding: 0 24px;
	box-sizing: border-box;
}
.lgib-hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lgib-radius);
}
.lgib-chooser {
	max-width: var(--lgib-maxwidth);
	margin: 20px auto 40px;
	padding: 0 24px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.lgib-chooser a {
	flex: 1 1 220px;
	text-align: center;
	padding: 20px 16px;
	background-color: var(--lgib-card);
	border: 1px solid var(--lgib-border);
	border-radius: var(--lgib-radius);
	box-shadow: var(--lgib-shadow);
	font-family: var(--lgib-font-bold);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--lgib-ink);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lgib-chooser a:hover {
	background-color: var(--lgib-red);
	color: #ffffff;
	box-shadow: var(--lgib-shadow-hover);
	transform: translateY(-2px);
}

/* Footer */
.lgib-footer {
	margin-top: 40px;
	padding: 32px 24px;
	text-align: center;
	background-color: #ffffff;
	border-top: 1px solid var(--lgib-border);
}
.lgib-footer img {
	display: block;
	margin: 0 auto 14px;
}
.lgib-footer__text {
	font-family: var(--lgib-font);
	font-size: 12px;
	color: var(--lgib-muted);
}
.lgib-footer__text a {
	color: var(--lgib-muted);
	text-decoration: underline;
}

/*
==========================================================================
| Fase 2: landingspagina / welkomsttekst (imagebank.asp, subid=welcomesub) |
==========================================================================
*/
.lgib-hero-panel__text {
	padding: 8px 4px 20px;
	max-width: 720px;
}
.lgib-h1 {
	font-family: var(--lgib-font-bold);
	font-size: 1.8em;
	line-height: 1.25;
	color: var(--lgib-ink);
	margin: 8px 0 16px;
}
.lgib-hero-panel__text p {
	font-family: var(--lgib-font);
	font-size: 1em;
	line-height: 1.55;
	color: var(--lgib-body);
	margin: 0 0 14px;
}
.lgib-hero-panel__text strong {
	color: var(--lgib-ink);
}
.lgib-stats {
	display: flex;
	gap: 16px;
	margin: 4px 0 20px;
	flex-wrap: wrap;
}
.lgib-stat {
	background-color: var(--lgib-card);
	border: 1px solid var(--lgib-border);
	border-radius: var(--lgib-radius-sm);
	padding: 12px 22px;
	text-align: center;
	box-shadow: var(--lgib-shadow);
}
.lgib-stat__num {
	display: block;
	font-family: var(--lgib-font-bold);
	font-size: 1.6em;
	color: var(--lgib-red);
}
.lgib-stat__label {
	display: block;
	font-family: var(--lgib-font);
	font-size: .78em;
	color: var(--lgib-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.lgib-quicknav-label {
	font-family: var(--lgib-font-bold);
	font-size: .8em;
	color: var(--lgib-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 4px 0 10px;
}
.lgib-pathchoice {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 14px;
}
.lgib-pathcard {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background-color: var(--lgib-card);
	border: 1px solid var(--lgib-border);
	border-radius: var(--lgib-radius);
	padding: 20px;
	box-shadow: var(--lgib-shadow);
	text-decoration: none;
	color: var(--lgib-ink);
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.lgib-pathcard:hover {
	background-color: var(--lgib-red);
	color: #ffffff;
	box-shadow: var(--lgib-shadow-hover);
	transform: translateY(-2px);
}
.lgib-pathcard__title {
	font-family: var(--lgib-font-bold);
	font-size: 1.05em;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.lgib-pathcard__sub {
	font-family: var(--lgib-font);
	font-size: .8em;
	opacity: .75;
}
.lgib-pathcard--search {
	background-color: var(--lgib-bg);
}
.lgib-pathcard__form {
	display: flex;
	margin-top: 6px;
}
.lgib-pathcard__form input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--lgib-border);
	border-right: none;
	border-radius: var(--lgib-radius-sm) 0 0 var(--lgib-radius-sm);
	padding: 0 12px;
	height: 38px;
	font-family: var(--lgib-font);
	font-size: .9em;
	color: var(--lgib-ink);
	outline: none;
	background-color: #ffffff;
}
.lgib-pathcard__form input[type="text"]:focus {
	border-color: var(--lgib-red);
}
.lgib-pathcard__form .lgib-btn {
	border-radius: 0 var(--lgib-radius-sm) var(--lgib-radius-sm) 0;
	height: 38px;
	padding: 0 16px;
}
.lgib-archive-note {
	font-family: var(--lgib-font);
	font-size: .82em;
	color: var(--lgib-muted);
	margin: 0 0 20px;
}
.lgib-notice {
	background-color: var(--lgib-red-tint);
	border-left: 4px solid var(--lgib-red);
	border-radius: 0 var(--lgib-radius-sm) var(--lgib-radius-sm) 0;
	padding: 14px 18px;
	font-family: var(--lgib-font);
	font-size: .92em;
	line-height: 1.5;
	color: var(--lgib-ink);
	max-width: 560px;
}
.lgib-notice strong {
	color: var(--lgib-red);
	font-family: var(--lgib-font-bold);
}
.lgib-notice a {
	color: var(--lgib-red);
}
.lgib-newest {
	margin: 0 0 20px;
	max-width: 560px;
}
.lgib-newest__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 2px solid var(--lgib-red-tint);
	padding-left: 4px;
}
.lgib-newest__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--lgib-radius-sm);
	text-decoration: none;
	transition: background-color .15s ease;
}
.lgib-newest__item:hover {
	background-color: var(--lgib-red-tint);
}
.lgib-newest__group {
	font-family: var(--lgib-font-bold);
	font-size: .88em;
	color: var(--lgib-ink);
	white-space: nowrap;
}
.lgib-newest__ref {
	font-family: var(--lgib-font);
	font-size: .88em;
	color: var(--lgib-body);
}
.lgib-newest__arrow {
	margin-left: auto;
	color: var(--lgib-red);
	font-family: var(--lgib-font-bold);
}
.lgib-disclaimer {
	font-family: var(--lgib-font);
	font-size: .78em;
	color: var(--lgib-muted);
	padding: 16px 4px 4px;
	border-top: 1px solid var(--lgib-border);
	margin-top: 20px;
}

@media (max-width: 680px) {
	.lgib-container,
	.lgib-hero,
	.lgib-chooser {
		padding-left: 16px;
		padding-right: 16px;
	}
	.lgib-header__inner {
		gap: 10px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.lgib-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}
	.lgib-langswitch {
		margin-left: 0;
	}
	.lgib-titlebar {
		font-size: 15px;
		padding: 10px 12px;
	}
	.lgib-chooser {
		flex-direction: column;
	}
	.lgib-pathchoice {
		flex-direction: column;
	}
	.lgib-newest__item {
		flex-direction: column;
		gap: 2px;
	}
	.lgib-newest__arrow {
		display: none;
	}
}

/* ============================================================
   Fase 5: productdetail / downloadpagina (subid = downloadsub)
   ============================================================ */
.lgib-detail {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	background-color: var(--lgib-card);
	border: 1px solid var(--lgib-border);
	border-radius: var(--lgib-radius);
	box-shadow: var(--lgib-shadow);
	padding: 24px;
	margin: 18px 0;
	flex-wrap: wrap;
}
.lgib-detail__media {
	flex: 0 0 420px;
	max-width: 420px;
}
.lgib-detail__preview {
	background-color: #ffffff;
	border: 1px solid var(--lgib-border);
	border-radius: var(--lgib-radius-sm);
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.lgib-detail__preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.lgib-detail__player {
	margin-top: 12px;
}
.lgib-detail__playerlink {
	font-family: var(--lgib-font);
	font-size: .82em;
	margin: 8px 0 0;
}
.lgib-detail__playerlink a {
	color: var(--lgib-red);
}
.lgib-detail__actions {
	margin-top: 12px;
	text-align: center;
}
.lgib-detail__info {
	flex: 1 1 320px;
	min-width: 280px;
}
.lgib-detail__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}
.lgib-meta {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--lgib-font);
}
.lgib-meta tr {
	border-top: 1px solid var(--lgib-border);
}
.lgib-meta tr:first-child {
	border-top: none;
}
.lgib-meta__label {
	padding: 10px 14px 10px 0;
	color: var(--lgib-muted);
	font-size: .85em;
	white-space: nowrap;
	vertical-align: top;
	width: 1%;
}
.lgib-meta__value {
	padding: 10px 0;
	color: var(--lgib-ink);
	font-size: .95em;
	vertical-align: top;
}
.lgib-detail__notice {
	font-family: var(--lgib-font);
	font-size: .85em;
	color: var(--lgib-body);
	background-color: var(--lgib-bg);
	border: 1px solid var(--lgib-border);
	border-radius: var(--lgib-radius-sm);
	padding: 12px 16px;
	margin: 0 0 20px;
}

/* Thumbnail links (top preview + grid) */
.lgib-thumb {
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.lgib-thumb__zoom {
	position: absolute;
	right: 4px;
	bottom: 4px;
	background-color: rgba(26, 26, 26, 0.72);
	color: #ffffff;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	font-size: 12px;
	pointer-events: none;
}
.lgib-thumb--main {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
/* Grid thumbnails (product photos, USP's, ...): render bigger than the
   original 80x80 source, scaled to fit a consistent square card without
   cropping. The main preview above (.lgib-thumb--main) keeps its own
   sizing, untouched here. */
.lgib-thumb:not(.lgib-thumb--main) img {
	width: 140px !important;
	height: 140px !important;
	object-fit: contain !important;
	border-radius: var(--lgib-radius-sm);
	background-color: #ffffff;
	border: 1px solid var(--lgib-border);
	box-sizing: border-box;
	padding: 4px;
}
/* De bestandengrids zijn oorspronkelijk opgebouwd met een oude
   tabeltruc die met 1px-cellen in een grijze kleur (#c9c9c9) een
   vierkant randje rond elke thumbnail tekende, plus een lichtgrijze
   (F7F7F7) achtergrondcel eromheen. Nu de thumbnail zelf via CSS al
   afgeronde hoeken en een eigen rand krijgt (hierboven), zorgt die
   oude tabelrand alleen nog voor een lelijk vierkant om de ronde hoek
   heen, en - op mobiel, waar deze cellen als losse blokken onder
   elkaar komen te staan - voor brede grijze balken. Beide worden hier
   onzichtbaar gemaakt; de opmaak van de tabel zelf blijft ongemoeid. */
.lgib-app-content tr[bgcolor="#c9c9c9"],
.lgib-app-content td[bgcolor="#c9c9c9"] {
	display: none !important;
}
.lgib-app-content td[bgcolor="F7F7F7"],
.lgib-app-content td[bgcolor="#FFFFFF"] {
	background-color: transparent !important;
	height: auto !important;
}

/* Lightbox */
.lgib-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lgib-lightbox[hidden] {
	display: none;
}
.lgib-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(20, 20, 20, 0.78);
}
.lgib-lightbox__panel {
	position: relative;
	background-color: #ffffff;
	border-radius: var(--lgib-radius);
	box-shadow: var(--lgib-shadow-hover);
	max-width: min(90vw, 900px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.lgib-lightbox__close {
	position: absolute;
	top: 8px;
	right: 8px;
	background-color: rgba(26, 26, 26, 0.72);
	color: #ffffff;
	border: none;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.lgib-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	margin: 0 auto;
	background-color: #ffffff;
}
.lgib-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-top: 1px solid var(--lgib-border);
	background-color: #ffffff;
}
.lgib-lightbox__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}
.lgib-lightbox__meta {
	font-family: var(--lgib-font);
	font-size: .78em;
	color: var(--lgib-muted);
}
.lgib-lightbox__name {
	font-family: var(--lgib-font);
	font-size: .85em;
	color: var(--lgib-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 680px) {
	.lgib-detail {
		flex-direction: column;
		padding: 16px;
	}
	.lgib-detail__media {
		flex: 1 1 auto;
		max-width: none;
	}
	.lgib-detail__toolbar {
		flex-direction: column;
		align-items: stretch;
	}
}

/*
==========================================================================
| Fase 3: sidebar-navigatie + categorie-overzicht (subid=looksub)         |
==========================================================================
*/
.lgib-sidebar-cell {
	padding-right: 4px;
	min-width: 260px;
	box-sizing: border-box;
}
.lgib-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.lgib-sidebar__group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.lgib-sidebar__heading {
	font-family: var(--lgib-font-bold);
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--lgib-muted);
	padding: 8px 10px 4px;
	white-space: nowrap;
}
.lgib-sidebar__link {
	font-family: var(--lgib-font);
	font-size: .92em;
	color: var(--lgib-ink);
	text-decoration: none;
	padding: 7px 10px;
	border-radius: var(--lgib-radius-sm);
	transition: background-color .15s ease, color .15s ease;
	white-space: nowrap;
}
.lgib-sidebar__link:hover {
	background-color: var(--lgib-red-tint);
	color: var(--lgib-red);
}

.lgib-category-section {
	margin: 0 0 28px;
}
.lgib-category-heading {
	margin: 0 0 14px;
}
.lgib-category-heading img {
	display: block;
	max-width: 100%;
	height: auto;
}
.lgib-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.lgib-category-card {
	display: flex;
	gap: 14px;
	background-color: var(--lgib-card);
	border: 1px solid var(--lgib-border);
	border-radius: var(--lgib-radius);
	box-shadow: var(--lgib-shadow);
	padding: 14px;
}
.lgib-category-card__media {
	flex: 0 0 90px;
	width: 90px;
}
.lgib-category-card__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lgib-radius-sm);
}
.lgib-category-card__body {
	flex: 1 1 auto;
	min-width: 0;
}
.lgib-category-card__label {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 8px;
}
.lgib-category-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.lgib-category-card__list li {
	line-height: 1.4;
}
.lgib-category-card__list a {
	font-family: var(--lgib-font);
	font-size: .88em;
	color: var(--lgib-body);
	text-decoration: none;
}
.lgib-category-card__list a:hover {
	color: var(--lgib-red);
	text-decoration: underline;
}

/*
==========================================================================
| Fase 4: zoekresultaten / lijst per subgroep (subid=listsub)             |
==========================================================================
*/
.lgib-results {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.lgib-results__header {
	margin: 0 0 12px;
}
.lgib-results__title {
	font-family: var(--lgib-font-bold);
	font-size: 1.4em;
	color: var(--lgib-ink);
	margin: 0 0 4px;
}
.lgib-results__subtitle {
	font-family: var(--lgib-font-bold);
	font-size: 1em;
	color: var(--lgib-muted);
	margin: 0;
}
.lgib-results__group {
	margin: 0 0 22px;
}
.lgib-results__groupname {
	font-family: var(--lgib-font-bold);
	font-size: 1.05em;
	color: var(--lgib-ink);
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--lgib-border);
}
.lgib-results__subgroupbar {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	background-color: var(--lgib-card);
	border: 1px solid var(--lgib-border);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lgib-results__subgroupbar:hover {
	background-color: var(--lgib-red-tint);
	border-color: var(--lgib-red);
	box-shadow: var(--lgib-shadow);
}
.lgib-results__subgroupbar--open {
	background-color: var(--lgib-red);
	border-color: var(--lgib-red);
}
.lgib-results__subgroupbar--open:hover {
	background-color: var(--lgib-red-dark);
	border-color: var(--lgib-red-dark);
}
.lgib-results__subgroupname {
	font-family: var(--lgib-font-bold);
	font-size: .95em;
	color: var(--lgib-ink);
}
.lgib-results__subgroupbar--open .lgib-results__subgroupname {
	color: #ffffff;
}
.lgib-results__count {
	font-family: var(--lgib-font);
	font-size: .85em;
	color: var(--lgib-muted);
}
.lgib-results__subgroupbar--open .lgib-results__count {
	color: rgba(255, 255, 255, 0.8);
}
.lgib-results__chevron {
	margin-left: auto;
	color: var(--lgib-muted);
	font-size: .8em;
	transition: transform .15s ease, color .15s ease;
}
.lgib-results__subgroupbar--open .lgib-results__chevron {
	color: #ffffff;
	transform: rotate(180deg);
}
.lgib-results__items {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 6px;
	padding-left: 4px;
	border-left: 2px solid var(--lgib-red-tint);
}
.lgib-results__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--lgib-radius-sm);
	text-decoration: none;
	transition: background-color .15s ease;
}
.lgib-results__item:hover {
	background-color: var(--lgib-red-tint);
}
.lgib-results__itemref {
	font-family: var(--lgib-font-bold);
	font-size: .88em;
	color: var(--lgib-ink);
	white-space: nowrap;
}
.lgib-results__itemname {
	font-family: var(--lgib-font);
	font-size: .88em;
	color: var(--lgib-body);
}

@media (max-width: 680px) {
	.lgib-category-grid {
		grid-template-columns: 1fr;
	}
	.lgib-category-card {
		flex-direction: column;
	}
	.lgib-category-card__media {
		width: 100%;
		flex-basis: auto;
	}
	.lgib-results__item {
		flex-direction: column;
		gap: 2px;
	}
}

/* Cookiebar */
.lgib-cookiebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	background-color: var(--lgib-ink);
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2);
}
.lgib-cookiebar[hidden] {
	display: none;
}
.lgib-cookiebar__inner {
	max-width: var(--lgib-maxwidth);
	margin: 0 auto;
	padding: 18px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
}
.lgib-cookiebar__text {
	margin: 0;
	flex: 1 1 480px;
	font-family: var(--lgib-font);
	font-size: .85em;
	line-height: 1.6;
	color: #f2f2f2;
}
.lgib-cookiebar__text a {
	color: #ffffff;
	text-decoration: underline;
}
.lgib-cookiebar__actions {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.lgib-cookiebar__actions .lgib-btn {
	min-width: 130px;
}
.lgib-cookiebar__actions .lgib-btn--ghost {
	background-color: transparent;
	color: #f2f2f2;
	border-color: #6b6b6b;
}
.lgib-cookiebar__actions .lgib-btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: #929292;
}
@media (max-width: 680px) {
	.lgib-cookiebar__inner {
		padding: 16px;
	}
	.lgib-cookiebar__actions {
		width: 100%;
	}
	.lgib-cookiebar__actions .lgib-btn {
		flex: 1 1 auto;
	}
}

/* Legal / content pages (cookiebeleid, ...) */
.lgib-legal {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	font-family: var(--lgib-font);
	color: var(--lgib-body);
	line-height: 1.6;
	box-sizing: border-box;
}
.lgib-legal h1 {
	font-family: var(--lgib-font-bold);
	color: var(--lgib-ink);
	font-size: 1.6em;
	margin: 0 0 20px;
}
.lgib-legal h2 {
	font-family: var(--lgib-font-bold);
	color: var(--lgib-ink);
	font-size: 1.15em;
	margin: 32px 0 12px;
}
.lgib-legal p {
	margin: 0 0 14px;
}
.lgib-legal table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 20px;
	font-size: .92em;
}
.lgib-legal th,
.lgib-legal td {
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--lgib-border);
	vertical-align: top;
}
.lgib-legal th {
	background-color: var(--lgib-bg);
	font-family: var(--lgib-font-bold);
	color: var(--lgib-ink);
}
.lgib-legal ul {
	margin: 0 0 14px;
	padding-left: 22px;
}
.lgib-legal li {
	margin-bottom: 6px;
}
@media (max-width: 680px) {
	.lgib-legal table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/*
==========================================================================
| Mobiele bruikbaarheid (smartphone)                                     |
| De site blijft desktop-first (zie plan), maar deze regels zorgen dat   |
| alles op een smartphone tenminste leesbaar en bedienbaar is: geen      |
| lege reuzevakken, geen horizontale scroll van de hele pagina, sidebar  |
| boven de inhoud in plaats van ernaast.                                 |
==========================================================================
*/
@media (max-width: 680px) {
	/* Fix: binnen een flex-container die op mobiel naar kolomrichting
	   omschakelt (flex-direction: column), wordt "flex: 1 1 220px" een
	   HOOGTE van 220px in plaats van een breedte. Dat gaf de lege,
	   uitgerekte vakken op de taalkeuzepagina en de "kies een pad"-kaarten. */
	.lgib-chooser a,
	.lgib-pathcard {
		flex: 0 0 auto;
	}

	/* Sidebar + inhoud: naast elkaar in een tabel op desktop, hieronder
	   worden ze losse, volle-breedte blokken die onder elkaar staan. */
	.lgib-app-layout,
	.lgib-app-layout > tbody,
	.lgib-app-layout > tbody > tr {
		display: block;
		width: 100%;
	}
	.lgib-app-spacer {
		display: none;
	}
	.lgib-sidebar-cell,
	.lgib-app-content {
		display: block;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		padding-left: 0;
		padding-right: 0;
	}
	.lgib-sidebar-cell {
		margin-bottom: 24px;
	}
	/* Productdetail/downloadpagina: grote preview boven de gegevens in
	   plaats van ernaast. */
	.lgib-detail {
		padding: 16px;
		gap: 20px;
	}
	.lgib-detail__media {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.lgib-detail__info {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* De bestandengrids (Model, USP's, Specsheets, ...) worden nog met
	   klassieke HTML-tabellen met een vaste 6-kolomsverdeling opgebouwd
	   (server-side, per rij een vast aantal kolommen). Een tabelrij kan
	   van zichzelf niet herschikken naar meerdere regels, dus we schakelen
	   de tabel-, rij- en celweergave op mobiel om naar gewone blokken.
	   Resultaat: elk bestand komt onder elkaar te staan, in 1 kolom,
	   met een leesbaar formaat in plaats van 6 verdrukte kolommetjes.
	   De gegevenstabel (Model/Omschrijving/...) blijft buiten schot, die
	   staat al netjes onder elkaar via .lgib-meta. */
	.lgib-app-content table:not(.lgib-meta),
	.lgib-app-content table:not(.lgib-meta) > tbody,
	.lgib-app-content table:not(.lgib-meta) tr {
		display: block;
		width: 100%;
	}
	.lgib-app-content table:not(.lgib-meta) td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	.lgib-app-content table:not(.lgib-meta) td[colspan] {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}