@font-face {
    font-family: 'bellota';
    src: url('../webfonts/Bellota-Bold-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'bellota';
    src: url('../webfonts/Bellota-BoldItalic-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'bellota';
    src: url('../webfonts/Bellota-Italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'bellota';
    src: url('../webfonts/Bellota-Light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'bellota';
    src: url('../webfonts/Bellota-LightItalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'bellota';
    src: url('../webfonts/Bellota-Regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'amaranth';
    src: url('../webfonts/amaranth-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'amaranth';
    src: url('../webfonts/amaranth-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'amaranth';
    src: url('../webfonts/amaranth-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'amaranth';
    src: url('../webfonts/amaranth-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-bold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-bolditalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-semibold-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-semibolditalic-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-thin-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'josefin';
    src: url('../webfonts/josefinsans-thinitalic-webfont.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}




@view-transition {
	navigation: auto;
}

::view-transition-group(.fast-slide) {
	animation-duration: 0.25s;
}

:root {
	interpolate-size: allow-keywords;
	
	--bgColorHeader: linear-gradient(0deg, rgba(255, 20, 147, 1) 0%, rgba(255, 105, 180, 1) 100%);
	--textColorHeader: #444;
	
	--bgColorNav: linear-gradient(0deg, rgba(255, 20, 147, 1) 0%, rgba(255, 105, 180, 1) 100%);
	--textColorNav: #222;
	
	--bgColorTitle: linear-gradient(0deg, rgba(255, 20, 147, 1) 0%, rgba(255, 105, 180, 1) 100%);
	--textColorTitle: #fff;
	--borderColorTitle: #fff;
	--borderWidthTitle: 1px;
	
	--bgColorPagination: #ff1493;
	--textColorPagination: #fff;
	
	--bgArticleTitel: #ff1493;
	--textArticleTitel: #fff;
	
	--bgArticleStatus: hotpink;
	--textArticleStatus: #fff;
	
	--borderColorFooter: #ff1493;
	--bgColorFooter: linear-gradient(0deg, rgba(255, 105, 180, 1) 0%, rgba(255, 20, 147, 1) 100%);
	--textColorFooter: #fff;
	
	--bgDetails: #fff;
	
	--borderNav: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ffc0cb' stroke-width='6' stroke-dasharray='11%2c 12' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
	/* --contentWidth: min(1200px, calc(100vw - 1rem)); */
	--contentWidth: min(1200px, 96vw);
	
	--fontSpecial: 'bellota';
	
	
	--fontDefault: 'josefin';
	--fontSizeDefault: 1.25rem;
	--fontWeightDefault: 300;
    --fontLineHeightDefault: 1.5rem;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #444;
	text-decoration: none;
}

html,
body {
	background: var(--colorD);
	font-family: var(--fontSpecial);
}

input[type="checkbox"].hidden {
	position: absolute;
	width: 0px;
	height: 0px;
	opacity: 0;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    padding: 0.5rem;
    appearance: none;
    border: 1px solid hotpink;
    border-radius: 0.25rem;
    font-size: 1rem;
}

table td:has(input.w2),
table td:has(input.w3),
table td:has(input.w4),
table td:has(input.w5) {
	display: table-row;
	@media (width > 660px) {
		display: table-cell;
	}
}

input.w2 {
    width: 8rem;
}
input.w3 {
    width: 12rem;
}
input.w4 {
    width: 16rem;
}
input.w5 {
    width: 20rem;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
	margin: 0 auto;
}

.container {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
}

.content {
	/* overflow: auto; */
	/* scrollbar-gutter: stable; */
    /* scrollbar-width: thin; */
	display: grid;
	grid-template-rows: auto 1fr;
}

header {
    position: relative;
	/* background: var(--bgColorHeader); */
	color: var(--textColorHeader);
	background: url(../images/top.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

.headercontent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    justify-items: end;
	max-width: var(--contentWidth);
    margin-inline: auto;
}

.logo img {
	max-height: 10rem;
	max-width: 100%;
	padding: 0.5rem;
}

.searchbarcontainer {
    width: var(--contentWidth);
    margin-inline: auto;
	position: relative;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
}


.searchbarcontainer:focus-within {
	opacity: 1;
	pointer-events: all;
}

.searchbarcontainer form {
    position: absolute;
    right: 0px;
    bottom: 0.5rem;
}

.searchbarcontainer form::after {
    content: '';
    /* border: 2px dashed #000; */
    inset: 2px;
    position: absolute;
    pointer-events: none;
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='2' stroke-dasharray='2%2c 4' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}

.searchinput {
    font-size: 1.5rem;
    font-weight: 100;
    height: 3.5rem;
    padding-inline: 1rem 3.5rem;
    appearance: none;
    border: none;
    background: papayawhip;
	outline: none;
	width: min(600px, var(--contentWidth));
}



.topbar {
	background: var(--bgColorNav);
	color: var(--textColorNav);
	position: sticky;
	top: 0px;
	padding-block: 0.5rem;
	display: grid;
    grid-template-columns: 1fr auto;
	z-index: 10;
}

.topbar * {
	color: #fff;
	font-weight: 500;
	font-size: 1.25rem;
}

.topbar .switchcat {
	padding-inline: 0.5rem;
}

.topbar .switchcat i {
	rotate: -90deg;
	transition: 250ms rotate;
}

.topbar:has(+ .content > .balklinks > .hidden:checked) .switchcat i {
	rotate: 0deg;
}

.topbar [for="switchmenu"] {
	padding-inline: 1rem;
}

@media (width > 660px) {
	.topbar .merken,
	.topbar label {
		display: none;
	}
}

.topbar input[type="checkbox"]:checked + label + .topbarcontent {
	display: grid;
	@media (width > 660px) {
		display: flex;
	}
}

.topbarcontent a {
    margin-bottom: 2px;
	text-align: right;
}

.topbarcontent a:hover {
    margin-bottom: 1px;
    border-bottom: 1px dashed #fff;
}

.topbarcontent a.actief,
.topbarcontent a:hover.actief {
    border-bottom: 2px dashed #fff;
    margin-bottom: 0px;
}

/* .topbar::before { */
	/* position: absolute; */
	/* inset: -2px 0px -1px 0px; */
	/* pointer-events: none; */
	/* content: ''; */
	/* background-image: var(--borderNav); */
/* } */

.knoppen {
    display: flex;
    gap: 0.5rem;
    padding-block: 0.5rem;
}

.knoppen a,
.knoppen label,
.searchbarcontainer button {
    font-size: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    background: papayawhip;
    position: relative;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.searchbarcontainer button {
    position: absolute;
    top: 0px;
    right: 0px;
    border: 0px;
}

.knoppen i,
.searchbarcontainer button i {
	position: relative;
	z-index: 10;
}

.knoppen a:hover i,
.knoppen label:hover i,
.searchbarcontainer button:hover i {
	color: #fff;
}

.knoppen a:hover i,
.knoppen label:hover i,
.searchbarcontainer button:hover i {
	filter: drop-shadow(0px 0px 1px black);
}

.knoppen a::after,
.knoppen label::after {
    content: '';
    position: absolute;
    inset: 2px;
    /* border-radius: 0.5rem; */
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='2' stroke-dasharray='2%2c 4' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}

.knoppen a:hover::after,
.knoppen label:hover::after {
	background-color: #0003;
}

/* .topbarcontent { */
    /* display: flex; */
    /* gap: 1rem; */
    /* justify-content: space-between; */
/* } */

.topbarcontent {
    display: none;
    gap: 1rem;
    justify-content: space-between;
    position: absolute;
    background: var(--bgColorNav);
    padding: 0.5rem;
    right: 0px;
    top: 100%;
	@media (width > 660px) {
		display: flex;
		right: unset;
		top: unset;
		position: static;
		background: none;
		width: var(--contentWidth);
        margin-inline: auto;
	}
}

.balklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    width: var(--contentWidth);
    margin-inline: auto;
	font-weight: 500;
	overflow: clip;
	height: 0px;
	transition: 250ms height;
	@media (width > 660px) {
		height: auto;
	}
}

.balklinks:has(input.hidden:checked) {
	height: auto;
}

.balklinks a:hover {
	text-decoration: underline;
}

.main {
    background: url(../images/stitch.png);
	padding-block: 1rem;
}

.main img {
	max-width: 100%;
	display: block;
}

.articleimg img {
	height: 100%;
	width: 100%;
    object-fit: cover;
}

.details {
    display: grid;
    grid-template-columns: 1fr;
    width: var(--contentWidth);
    margin-inline: auto;
	background: var(--bgDetails);
	@media (width > 660px) {
		grid-template-columns: 1fr 1fr;
	}
}

.tekst,
.fotos {
	font-family: var(--fontDefault);
	font-size: var(--fontSizeDefault);
	font-weight: var(--fontWeightDefault);
    line-height: var(--fontLineHeightDefault);
	padding: 0.5rem;
}

.varianten,
.opties {
    border: 1px dashed #444;
    padding-inline: 0.5rem;
    margin-top: 1rem;
}

.varianten .kleinetitel,
.opties .kleinetitel {
    background: #fff;
    margin-top: -1rem;
    width: fit-content;
    padding-inline: 0.5rem;
    font-weight: 500;
    font-family: var(--fontSpecial);
}

.varianten table td,
.opties table td {
	padding: 0.25rem;
}
	
.varianten table td label,
.opties table td label {
	cursor: pointer;
	font-weight: 300;
}

.prijs {
    padding: 0.5rem 1rem;
    border: 1px dashed #444;
    width: fit-content;
    margin-block: 0.5rem;
}

img.hoofdfoto {
	width: 100%;
	cursor: zoom-in;
	filter: drop-shadow(0px 0px 1px #0008);
	aspect-ratio: 1;
    object-fit: contain;
}

.thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-block: 0.5rem;
    align-items: center;
}

.thumbs img {
	cursor: pointer;
	filter: drop-shadow(0px 0px 1px #0008);
}

.thumbs img:hover {
	filter: drop-shadow(0px 1px 2px #0008);
}

.thumb.hidden {
	display: none;
}

.thumb:nth-child(1) {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}

.thumb:nth-child(2) {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}

.thumb:nth-child(3) {
	grid-row: 1 / 2;
	grid-column: 3 / 4;
}

.thumb:nth-child(4) {
	grid-row: 1 / 2;
	grid-column: 4 / 5;
}

.thumbscounter {
	grid-row: 1 / 2;
	grid-column: 4 / 5;
	background: #0008;
	color: #fff;
	font-size: 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	z-index: 2;
}

.rowsouter {
    display: grid;
    width: var(--contentWidth);
    margin-inline: auto;
    gap: 1rem;
	@media (width > 600px) {
		grid-template-columns: 1fr 1fr;
	}
	@media (width > 900px) {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.rowsouter a {
	position: relative;
	display: grid;
	grid-template-rows: 2.5rem 250px 1fr auto;
	background: #fff;
	filter: drop-shadow(0px 1px 1px #0008);
	border-radius: 0.5rem;
	transition: 150ms translate, 150ms filter;
}

.rowsouter a:hover {
	translate: 0px -3px;
	filter: drop-shadow(0px 3px 3px #0008);
}

.rowsouter .nieuw {
	position: absolute;
}

article {
	display: grid;
}

.articletitel {
	background: var(--bgArticleTitel);
	color: var(--textArticleTitel);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
	font-weight: 500;
	font-size: 1.25rem;
	padding: 0.25rem 0.5rem;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.articletitelcontent {
	color: var(--textArticleTitel);
	font-weight: 500;
}

.articlecontent {
    overflow: hidden;
    max-height: 8rem;
    padding: 0.5rem;
}

.articlemeerinfo {
	background: var(--bgArticleTitel);
	color: var(--textArticleTitel);
	padding: 0.5rem;
	font-weight: 500;
	text-align: center;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

.articleimg {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.articleimg[data-status="nieuw"]::before {
	content: attr(data-status-text);
    position: absolute;
    font-size: 1.25rem;
    font-weight: 500;
    background: var(--bgArticleStatus);
    color: var(--textArticleStatus);
    rotate: -45deg;
    padding: calc(0.25rem + 6px) calc(2rem + 6px);
    left: calc(-2.25rem - 4px);
    top: calc(0.5rem - 4px);
	z-index: 2;
}

.articleimg[data-status="nieuw"]::after {
	content: attr(data-status-text);
    position: absolute;
    font-size: 1.25rem;
    font-weight: 500;
    background: var(--bgArticleStatus);
    color: var(--textArticleStatus);
    rotate: -45deg;
    padding: 0.25rem 2rem;
    left: -2.25rem;
    top: 0.5rem;
    border: 2px dashed deeppink;
	z-index: 3;
}

.articleimg[data-status="terug"]::before {
	content: attr(data-status-text);
    position: absolute;
    font-size: 1.25rem;
    font-weight: 500;
    background: var(--bgArticleStatus);
    color: var(--textArticleStatus);
    rotate: -45deg;
    padding: calc(0.25rem + 6px) calc(2rem + 6px);
    left: calc(-3.25rem - 4px);
    top: calc(3rem - 4px);
	z-index: 2;
}

.articleimg[data-status="terug"]::after {
	content: attr(data-status-text);
    position: absolute;
    font-size: 1.25rem;
    font-weight: 500;
    background: var(--bgArticleStatus);
    color: var(--textArticleStatus);
    rotate: -45deg;
    padding: 0.25rem 2rem;
    left: -3.25rem;
    top: 3rem;
    border: 2px dashed deeppink;
	z-index: 3;
}

.rowsouter .nieuw {
}

.pagination {
    width: var(--contentWidth);
    margin-inline: auto;
    text-align: center;
	margin-block: 1rem;
}


.pagination i {
	display: inline;
	@media (width > 660px) {
		display: none;
	}
}

.pagination span {
	display: none;
	@media (width > 660px) {
		display: inline;
	}
}

.pagination a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--bgColorPagination);
	color: var(--textColorPagination);
	margin-inline: 0.1rem;
	position: relative;
	overflow-y: clip;
	isolation: isolate;
	filter: drop-shadow(0px 2px 1px #0008);
	@media (width > 660px) {
		padding: 0.5rem 1rem;
		margin-inline: 0.25rem;
	}
}

.pagination a:hover {
	translate: 0px 2px;
	filter: saturate(0.75) drop-shadow(0px 1px 1px #0008);
}

.pagination a.current,
.pagination a.current:hover {
    filter: saturate(0.5);
    translate: 0px 2px;
	cursor: default;
}

.pagination i,
.pagination span {
	color: var(--textColorTitle);
}

.pagination a:first-child:before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
	background: var(--bgColorPagination);
	rotate: 45deg;
    translate: 0% -50%;
	z-index: -1;
	@media (width > 660px) {
		width: 3rem;
		height: 3rem;
	}
}

.pagination a:last-child:before {
    content: '';
    position: absolute;
    right: -0.75rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
	background: var(--bgColorPagination);
	rotate: 45deg;
    translate: 0% -50%;
	z-index: -1;
	@media (width > 660px) {
		width: 3rem;
		height: 3rem;
	}
}

h1,
h2,
.titel {
	position: relative;
    width: var(--contentWidth);
    margin-inline: auto;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: var(--bgColorTitle);
	color: var(--textColorTitle);
}

.titel {
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.25rem;
	width: 100%;
    padding: 0.25rem 0.5rem;
    /* margin-bottom: 0.5rem; */
}

.main > h2 {
	width: var(--contentWidth);
}

h1::before,
.titel::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: var(--borderWidthTitle) dashed deeppink;
    pointer-events: none;
}

h1::after,
h2::after,
.titel::after {
	content: '';
	position: absolute;
	inset: 2px;
    border: var(--borderWidthTitle) dashed var(--borderColorTitle);
	pointer-events: none;
}

.dubbel {
	width: var(--contentWidth);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
	@media (width > 660px) {
		grid-template-columns: 1fr 1fr;
	}
}

.half {
	width: 100%;
	margin-inline: auto;
	max-width: var(--contentWidth);
	/* position: relative; */
	/* vertical-align: top; */
	/* @media (width > 660px) { */
		/* display: inline-block; */
		/* width: calc(var(--contentWidth) / 2); */
	/* } */
}

.window {
    border: 1px solid deeppink;
	background: #fff;
}


.knop,
.knophalf {
    appearance: none;
    border: 1px solid deeppink;
    font-size: 1rem;
    /* padding: 0.5rem 2rem; */
    height: 3rem;
    line-height: 3rem;
    padding-inline: 2rem;
    display: inline-block;
    background: deeppink;
    color: #fff;
    font-weight: 500;
    margin-block: 0.5rem;
    cursor: pointer;
}

.knop:hover,
.knophalf:hover {
	filter: saturate(0.75);
}

.tekstblok {
	width: var(--contentWidth);
	margin-inline: auto;
	background: #fff;
	padding: 0.5rem;
	font-family: var(--fontDefault);
	font-size: var(--fontSizeDefault);
	font-weight: var(--fontWeightDefault);
    line-height: var(--fontLineHeightDefault);
}

footer {
    background: var(--bgColorFooter);
    color: var(--textColorFooter);
    text-align: center;
    padding-block: calc(0.5rem + 4px); 0.5rem;
    position: relative;
}

footer::after {
	content: '';
	position: absolute;
	width: 100%;
	top: 4px;
	left: 0px;
	border-top: 1px dashed var(--textColorFooter);
	pointer-events: none;
}

footer::before {
	content: '';
	position: absolute;
	width: 100%;
	top: -4px;
	left: 0px;
	border-top: 1px dashed var(--borderColorFooter);
	pointer-events: none;
}




.popup {
	display: none;
    inset: 0px;
    position: fixed;
    z-index: 20;
	backdrop-filter: blur(3px) brightness(0.75);
}

.popup.lightbox {
	display: block;
	align-content: center;
    justify-items: center;
	--thumbheight: 8rem;
}

.popup.lightbox .popupcontent{
	display: grid;
	gap: 0.5rem;
	height: 96vh;
	width: 96vw;
	grid-template-rows: 1fr calc(var(--thumbheight) + 2rem);
    justify-items: center;
    align-items: start;
    container-type: inline-size;
}

img.viewerfoto {
    height: calc(100cqh - 4vh - var(--thumbheight) - 3rem);
    width: 100cqw;
    object-fit: contain;
	cursor: zoom-out;
}

.popupthumbs {
    display: flex;
    gap: 0.5rem;
	overflow: auto;
    width: 100%;
	max-width: var(--contentWidth);
    justify-content: space-evenly;
}

img.viewerthumb {
    max-height: var(--thumbheight);
	cursor: pointer;
}