/* Maritime Safety Clothes - stylesheet (refreshed 2026) */

:root{
	--orange:#e8770b;
	--orange-dark:#c76205;
	--ink:#2b2b2b;
	--muted:#6b6b6b;
	--line:#e2e4e7;
	--page:#eef0f2;
	--card:#ffffff;
	--soft:#f6f7f8;
	--radius:8px;
	--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body{
	margin:0;
	padding:24px 16px;
	background-color:var(--page);
	font-family:var(--font);
	font-size:15px;
	line-height:1.6;
	color:var(--ink);
	-webkit-text-size-adjust:100%;
}

img{
	border:0;
}

/* --- Page frame --- */

#container{
	margin:0 auto;
	width:100%;
	max-width:922px;
	background-color:var(--card);
	border:0;
	border-radius:var(--radius);
	box-shadow:0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
	padding:8px 16px 16px;
	border-collapse:separate;
}

#container table{
	border-collapse:collapse;
}

/* the banner and stripe titles are fixed-size images: let them shrink */
#container img{
	max-width:100%;
	height:auto;
}

img[src$="banner.jpg"]{
	display:block;
	width:100%;
	border-radius:6px;
}

/* --- Page title bar --- */

.pagetitle{
	display:flex;
	align-items:flex-end;
	margin-top:16px;
	background:var(--soft);
	border-bottom:3px solid var(--orange);
	border-radius:6px 6px 0 0;
}

.pagetitle-side{
	flex:none;
	width:299px;
	padding:0 14px 12px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--muted);
}

.pagetitle h1{
	margin:0;
	padding:14px 16px 10px;
	font-size:26px;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.01em;
	color:var(--ink);
}

/* --- Header --- */

a.logo{
	display:inline-block;
	padding:8px 0;
}

a.logo img{
	display:block;
	width:400px;
	max-width:100%;
	height:auto;
}

#nav{
	vertical-align:bottom;
	text-align:right;
	padding-bottom:10px;
}

a.nav{
	display:inline-block;
	font-family:var(--font);
	font-size:13px;
	font-weight:600;
	letter-spacing:.06em;
	color:var(--ink);
	text-decoration:none;
	margin:0 0 0 4px;
	padding:6px 10px;
	border-radius:4px;
	transition:color .15s, background-color .15s;
}

a:hover.nav,
a.nav:focus-visible{
	color:#fff;
	background-color:var(--orange);
	text-decoration:none;
}

/* --- Language switcher --- */

#azindex{
	float:right;
	text-align:right;
	padding:0;
}

#index{
	display:flex;
	gap:6px;
	font:600 12px var(--font);
	margin:8px 0 4px;
	padding:0;
}

#index li{
	list-style-type:none;
	margin:0;
	padding:0;
}

#index a:link,
#index a:visited{
	display:block;
	min-width:36px;
	padding:4px 8px;
	border:1px solid var(--line);
	border-radius:4px;
	background:var(--soft);
	color:var(--ink);
	text-align:center;
	text-decoration:none;
}

#index a:hover{
	border-color:var(--orange);
	color:var(--orange);
}

/* --- Lists --- */

ul{
	list-style:none;
	margin-left:0;
	margin-top:10px;
	padding-left:0;
}

/* sidebar menu: keep its column at the width of the "Producten" title image */
td[width="299"]{
	width:299px;
	min-width:299px;
}

.list1{
	margin:0;
	border:1px solid var(--line);
	border-top:0;
	border-radius:0 0 var(--radius) var(--radius);
	overflow:hidden;
}

.list1 li{
	background:none;
	border-top:1px solid var(--line);
	padding:0;
	width:100%;
}

.list1 li:first-child{
	border-top:0;
}

.list1 li a{
	display:block;
	position:relative;
	padding:10px 14px 10px 30px;
	background:none;
	font-family:var(--font);
	font-size:14px;
	line-height:1.35;
	color:var(--ink);
	text-decoration:none;
	transition:background-color .15s, color .15s;
}

.list1 li a::before{
	content:"";
	position:absolute;
	left:14px;
	top:50%;
	width:6px;
	height:6px;
	margin-top:-3px;
	border-radius:50%;
	background:var(--orange);
}

.list1 li a:hover{
	font-family:var(--font);
	font-size:14px;
	text-decoration:none;
	color:var(--orange-dark);
	background-color:#fff6ee;
}

/* product properties */
.verloop{
	margin:10px 0;
}

.verloop li{
	position:relative;
	background:none;
	padding:0 0 0 18px;
	font-family:var(--font);
	font-size:14px;
}

.verloop li::before{
	content:"";
	position:absolute;
	left:2px;
	top:.6em;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--orange);
}

/* --- Product cards --- */

.images{
	margin:8px 0 4px 8px;
	border:1px solid var(--line);
	border-radius:6px;
	padding:3px;
	background:#fff;
}

.link_insprong{
	margin-left:8px;
}

.kaderrand{
	border:1px solid var(--line);
	border-radius:var(--radius);
	margin:16px 0 0 16px;
	overflow:hidden;
	background:#fff;
}

.kaderrand > table{
	width:100%;
}

.kaderrand td{
	vertical-align:top;
}

/* the template puts a <br /> after every property */
.verloop br{
	display:none;
}

.kaderrand td[bgcolor]{
	background-color:var(--soft) !important;
	border-bottom:1px solid var(--line);
}

.title{
	display:block;
	font-family:var(--font);
	font-size:14px;
	font-weight:700;
	letter-spacing:.03em;
	color:var(--ink);
	margin:0;
	padding:8px 12px;
	text-transform:uppercase;
}

.content{
	font-family:var(--font);
	font-size:15px;
	color:var(--ink);
	padding:12px 16px 0;
}

.content_keuring{
	font-family:var(--font);
	font-size:15px;
	color:var(--ink);
	padding:12px 16px;
}

/* --- Footer --- */

.footer{
	background:none;
	font-family:var(--font);
	font-size:13px;
	color:var(--muted);
	padding:16px 4px 0;
	text-align:center;
}

/* --- Links --- */

a.links,
a.links_home{
	font-family:var(--font);
	font-size:inherit;
	color:var(--orange-dark);
	text-decoration:underline;
	text-underline-offset:2px;
}

a:hover.links,
a:hover.links_home{
	font-family:var(--font);
	font-size:inherit;
	color:var(--ink);
	text-decoration:underline;
}

.donker{
	background-color:var(--soft);
}

/* --- Home page tiles --- */

.home_teasers{
	width:100%;
	margin-left:6px;
}

.home_teasers tr td{
	width:25%;
	vertical-align:top;
	padding-bottom:16px;
	line-height:1.35;
	font-size:14px;
}

.home_teasers tr td.content{
	width:auto;
	font-size:15px;
	line-height:1.6;
}

.home_teasers td[align] a.links{
	color:var(--ink);
	text-decoration:none;
	font-weight:600;
}

.home_teasers td[align] a.links:hover{
	color:var(--orange-dark);
}

/* --- Highlights: ISO 9001 and rental --- */

.highlights{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	margin:4px 0 20px;
}

.highlight{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:var(--soft);
	color:var(--ink);
	text-decoration:none;
	font-size:14px;
	line-height:1.4;
}

.highlight strong{
	display:block;
	font-size:15px;
}

.highlight > span:last-child{
	color:var(--muted);
}

a.highlight:hover{
	border-color:var(--orange);
}

a.highlight:hover strong{
	color:var(--orange-dark);
}

.iso-badge,
.hl-icon{
	flex:none;
	width:52px;
	height:52px;
}

.iso-badge{
	display:flex;
	align-items:center;
	justify-content:center;
	border:2px solid var(--orange);
	border-radius:50%;
	background:#fff;
	color:var(--orange-dark);
	font-size:11px;
	font-weight:800;
	line-height:1.1;
	text-align:center;
	letter-spacing:.04em;
}

.price-tag{
	display:inline-block;
	margin-bottom:8px;
	padding:4px 12px;
	border-radius:999px;
	background:var(--orange);
	color:#fff;
	font-weight:700;
}

.home_teasers .images{
	width:122px;
	height:122px !important;
	object-fit:contain;
	margin:8px auto 6px;
	transition:border-color .15s, transform .15s;
}

.home_teasers a:hover .images{
	border-color:var(--orange);
	transform:translateY(-2px);
}

/* --- Order form (bestelformulier) --- */

input,
select,
textarea,
button{
	font:inherit;
	max-width:100%;
}

.tekstvak_groot,
.tekstvak_klein,
.aantal,
textarea{
	background-color:#fff;
	border:1px solid #c9ccd1;
	border-radius:5px;
	padding:6px 8px;
	margin-bottom:10px;
	font-size:15px;
	color:var(--ink);
}

textarea{
	width:100%;
}

.tekstvak_groot{
	width:260px;
	max-width:100%;
	height:auto;
}

.tekstvak_klein{
	width:80px;
	height:auto;
}

.aantal{
	width:56px;
	height:auto;
	padding:3px 6px;
	margin-left:2px;
	font-size:14px;
}

.tekstvak_groot:focus,
.tekstvak_klein:focus,
.aantal:focus,
textarea:focus{
	outline:none;
	border-color:var(--orange);
	box-shadow:0 0 0 3px rgba(232,119,11,.2);
}

.opmerking{
	font-family:var(--font);
	font-size:13px;
	color:var(--muted);
}

/* fieldsets grow to fit their widest child unless told otherwise */
fieldset{
	min-width:0;
	width:100%;
	max-width:560px;
	margin:0 0 16px;
	padding:8px 16px 12px;
	border:1px solid var(--line);
	border-radius:var(--radius);
}

legend{
	font-weight:700;
	padding:0 6px;
}

.subcategorie{
	margin-left:25px;
}

.bestelknop{
	text-align:right;
}

.bestelknop_layout{
	background-color:var(--orange);
	color:#fff;
	font-weight:700;
	font-family:var(--font);
	font-size:15px;
	border:0;
	border-radius:5px;
	padding:10px 22px;
	cursor:pointer;
	transition:background-color .15s;
}

.bestelknop_layout:hover{
	background-color:var(--orange-dark);
}

/* --- Phones and small tablets --- */

@media (max-width:900px){
	body{
		padding:0;
		font-size:16px;
	}

	#container{
		border-radius:0;
		box-shadow:none;
		padding:0 16px 16px;
	}

	/* stack the old table layout into one column */
	#container table,
	#container tbody,
	#container tr,
	#container td{
		display:block;
		width:auto !important;
	}

	#container td[width="299"]{
		min-width:0;
	}

	#container td[height]{
		display:none;
	}

	a.logo{
		display:block;
		padding:14px 0 6px;
	}

	a.logo img{
		width:300px;
		margin:0 auto;
	}

	#nav{
		text-align:center;
		padding-bottom:8px;
	}

	#azindex{
		float:none;
	}

	#index{
		justify-content:center;
		margin:0 0 6px;
	}

	a.nav{
		margin:2px;
		padding:8px 10px;
	}

	img[src$="banner.jpg"]{
		height:140px;
		object-fit:cover;
	}

	.pagetitle-side{
		display:none;
	}

	.pagetitle h1{
		padding:12px 14px 8px;
		font-size:22px;
	}

	.list1{
		border-top:1px solid var(--line);
		border-radius:var(--radius);
		margin:16px 0 4px;
	}

	.kaderrand{
		margin:16px 0 0;
	}

	.kaderrand td{
		text-align:left;
	}

	.content,
	.content_keuring{
		padding:12px 4px 0;
	}

	.kaderrand .content{
		padding:12px 14px 4px;
	}

	.home_teasers{
		margin-left:0;
	}

	/* show the page content before the long product menu */
	#container tr:has(> td > .list1){
		display:flex;
		flex-direction:column-reverse;
	}

	/* home page tiles: two per row */
	#container .home_teasers tr{
		display:flex;
		flex-wrap:wrap;
	}

	#container .home_teasers tr td{
		width:50% !important;
		padding:0 4px 16px;
		text-align:center;
	}

	#container .home_teasers tr td.content{
		width:100% !important;
		padding:12px 4px 0;
		text-align:left;
	}

	.home_teasers .images{
		display:block;
	}

	/* the footer table sits outside #container */
	.footer{
		display:block;
		padding:16px;
	}

	table[width="888"]{
		width:100%;
	}
}

@media (max-width:560px){
	.highlights{
		grid-template-columns:1fr;
	}
}