html, body, div, span, applet, input, button, select, textarea, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub,
sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	margin: 0;
	padding: 0
}

article, aside, details,  figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block
}

body {
	line-height: 1
}

ol,
ul {
	list-style: none
}

blockquote,
q {
	quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: none
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

@font-face {
	font-family: "VAGRoundedStd";
	src: url("../fonts/vagroundedstd-bold-webfont.eot");
	src: url("../fonts/vagroundedstd-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/vagroundedstd-bold-webfont.woff") format("woff"), url("../fonts/vagroundedstd-bold-webfont.ttf") format("truetype"), url("../fonts/vagroundedstd-bold-webfont.svg#VAGRoundedStdBold") format("svg");
	font-weight: bold;
	font-style: normal
}

@font-face {
	font-family: "VAGRoundedStd";
	src: url("../fonts/vagroundedstd-thin-webfont.eot");
	src: url("../fonts/vagroundedstd-thin-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/vagroundedstd-thin-webfont.woff") format("woff"), url("../fonts/vagroundedstd-thin-webfont.ttf") format("truetype"), url("../fonts/vagroundedstd-thin-webfont.svg#VAGRoundedStdThin") format("svg");
	font-weight: normal;
	font-style: normal
}

a {
	text-decoration: none;
	color: inherit
}

b, strong,
h1, h2, div.emphasize {
	font-weight: bold
}

p:not(:first-child) {
	margin-top: 1em
}

h2+p:not(:first-child) {
	margin-top: 0
}

.shop p {
	margin-top: 0
}

.studio .comments a,
.studio #button-menu,
.studio #logo .selected,
.studio nav a.selected,
.studio nav a:hover,
.studio .list-grid>a {
	color: #e787b9
}

.studio #floating-button {
	background-color: #000
}

.studio .list-grid>a:hover {
	border-color: #e787b9
}

.studio .switch {
	background-position: top
}

.switch a.sw-studio:hover {
	color: #e787b9
}

.switch a:first-child:hover,
.studio .switch a:first-child {
	background-position: left top !important
}

.studio .switch a:last-child {
	background-position: right top
}

.collection .comments a,
.collection #button-menu,
.collection #logo .selected,
.collection nav a.selected,
.collection nav a:hover,
.collection .list-grid>a {
	color: #ae923c
}

.collection #floating-button {
	background-color: #ae923c
}

.collection .list-grid>a:hover {
	border-color: #ae923c
}

.collection .shop.list-grid>a span {
	background-color: #ae923c;
	border-color: #ae923c
}

.collection .switch {
	background-position: bottom
}

.switch a.sw-collection:hover {
	color: #ae923c
}

.switch a:last-child:hover,
.collection .switch a:last-child {
	background-position: right bottom
}

.collection .switch a:first-child {
	background-position: left bottom
}

.salon .comments a,
.salon #button-menu,
.salon #logo .selected,
.salon nav a.selected,
.salon nav a:hover,
.salon .list-grid>a {
	color: #000
}

.salon #floating-button {
	background-color: #000
}

.salon .list-grid>a:hover {
	border-color: #000
}

.salon .switch {
	background-position: top
}

.switch a.sw-salon:hover {
	color: #000
}

.switch a:first-child:hover,
.salon .switch a:first-child {
	background-position: left top !important
}

.salon .switch a:last-child {
	background-position: right top
}

nav {
	width: 309px
}

section {
	left: 309px;
	top: 0;
	bottom: 0
}

nav,
section {
	margin-top: 50px
}

#logo {
	width: 200px
}

@media all and (max-width: 1005px) {
	nav {
		width: 265px
	}

	section {
		left: 265px
	}

	#logo {
		width: 156px
	}
}

.big nav {
	width: 371px
}

.big section {
	left: 371px
}

header {
	display: none
}

#logo {
	position: fixed;
	top: 50px;
	z-index: 1;
	font-family: "VAGRoundedStd", Courier, monospace, Arial;
	font-size: 15px;
	text-align: right;
	color: #b6aab9;
	white-space: nowrap
}

.big #logo {
	width: 354px
}

#button-menu {
	display: none
}

#logo-image img {
	/*width: 119px;*/
	width: 140px;
}

.big #logo-image img {
	width: 192px
}

/* Sectiewissel als dropdown zoals live, in small-caps zoals live (13-10-2026: uppercase gaf ongelijke letterafstand, opm. Ineke). */
.switch {
	z-index: 1;
	position: relative;
	left: 2px;
	top: 121px; /* live: 104px; het logo is hier 140px breed (live 119px) en dus 17px hoger */
	float: right;
	width: 226px;
	height: 0;
	font-weight: bold;
	letter-spacing: 2px;
	font-variant: small-caps;
	line-height: 1em;
	margin-right: 109px;
	padding-top: 1em;
	overflow: hidden;
	border-bottom: 43px solid transparent; /* live: 60px; 17px minder omdat .switch hier 17px lager staat, anders valt het eerste menu-item (shop) eronder */
	transition: height .2s ease-in-out, border-bottom-width .2s ease-in-out;
	font-size: 1em
}

.switch a {
	display: block;
	padding-right: 23px;
	background-color: #fff
}

.switch a.selected {
	position: absolute;
	top: 0;
	right: 0;
	left: 0
}

.switch span,
.switch span:before,
.switch span:after {
	content: "";
	background-color: #b6aab9;
	display: block;
	height: 2px;
	width: 100%;
	position: absolute;
	border-radius: 1px;
	pointer-events: none;
	transform: translateY(0);
	transition: transform .2s ease-in-out
}

.switch span {
	width: 15px;
	top: 1px;
	left: auto;
	right: 2px;
	border-top: .42em solid #fff;
	border-bottom: .42em solid #fff
}

.switch span:before {
	top: -4px
}

.switch span:after {
	bottom: -4px
}

.switch:hover {
	height: 2em;
	border-bottom-width: 13px /* live: 30px, zie hierboven */
}

.switch:hover span:before {
	transform: translateY(-0.777em)
}

.switch:hover span {
	transform: translateY(1em)
}

.switch:hover span:after {
	transform: translateY(0.777em)
}

.switch .spacer {
	display: none
}

.big .switch {
	top: 166px;
	margin-right: 17px;
	font-size: 1.8em;
	border-bottom-width: 0;
	letter-spacing: 3px
}

.big .switch:hover {
	border-bottom-width: 0
}

.big .switch a {
	padding-right: 35px
}

.big .switch span {
	width: 23px
}

.big .switch span,
.big .switch span:before,
.big .switch span:after {
	height: 3px
}

.big .switch span:before {
	top: -6px
}

.big .switch span:after {
	bottom: -6px
}

nav {
	position: fixed;
	left: 0;
	font-family: "VAGRoundedStd", Courier;
	text-align: right;
	color: #b6aab9;
	white-space: nowrap;
	font-size: 15px
}

#menu {
	margin-top: 174px;
	margin-right: 109px
}

#menu li {
	position: relative
}

.big #menu {
	margin-right: 17px;
	margin-top: 251px
}

#menu>li>a {
	font-weight: bold;
	font-size: 36px;
	line-height: 35px
}

.big #menu>li>a {
	font-size: 72px;
	line-height: 67px
}

/* Salon-voorpagina: iets meer ruimte onder het eerste item (report), anders raakt de p de
   f en l van reflect eronder (verzoek Lars 06-10-2026). */
.salon.big #menu>li:first-child {
	margin-bottom: 8px
}

/* Idem in het kleinere menu op de andere salonpagina's, maar alleen als report dicht is: anders
   staat het submenu van report ertussen en is er niets te raken. */
.salon:not(.big) #menu>li:first-child:not(:has(>a.selected))+li {
	margin-top: 5px
}

#menu>li>ul {
	display: none;
	margin-top: 2px
}

#menu a.selected+ul {
	display: block
}

#menu>li li {
	line-height: 20px;
	letter-spacing: .5px
}

#menu>li li>a:before {
	content: "> "
}

#menu .menu-group>a {
	font-weight: bold;
	height: 20px;
	display: inline-block
}

#menu .menu-group ul {
	height: auto
}

#menu .menu-group.collapsed>ul {
	display: none
}

#menu .menu-group ul a:before {
	content: none
}

#menu .menu-group ul a:after {
	content: " >"
}

.icons .regular a {
	position: relative;
	display: inline-block;
	text-indent: 9999px;
	white-space: nowrap;
	overflow: hidden
}

.icons {
	margin-bottom: -6px
}

/* Tekst naast een icoon (contactpagina's: welk Instagram-account), verzoek Lars 06-10-2026.
   26px × de schaal van .regular (0,577) = 15px, de gewone tekstgrootte. */
.icons .regular a.icon-label {
	width: auto;
	height: 39px;
	margin: 0 1em 0 .3em;
	background: none;
	text-indent: 0;
	vertical-align: top;
	line-height: 39px;
	font-size: 26px
}

.icons .regular {
	transform: scale(0.5769230769);
	transform-origin: top left
}

.icons .regular a {
	width: 39px;
	height: 39px;
	margin-left: 2px;
	background-image: url(../img/icons-huge.png)
}

.collection .icons a.collection {
	display: none
}

.icons a.collection {
	background-position: 0% 0%
}

.icons a.mail {
	background-position: 16.6666666667% 0%
}

.icons a.newsletter {
	background-position: 33.3333333333% 0%
}

.icons a.twitter {
	background-position: 50% 0%
}

.icons a.facebook {
	background-position: 66.6666666667% 0%
}

.icons a.instagram {
	background-position: 83.3333333333% 0%
}

.icons a.vimeo {
	background-position: 100% 0%
}

.icons a:hover.collection {
	background-position: 0% 100%
}

.icons a:hover.mail {
	background-position: 16.6666666667% 100%
}

.icons a:hover.newsletter {
	background-position: 33.3333333333% 100%
}

.icons a:hover.twitter {
	background-position: 50% 100%
}

.icons a:hover.facebook {
	background-position: 66.6666666667% 100%
}

.icons a:hover.instagram {
	background-position: 83.3333333333% 100%
}

.icons a:hover.vimeo {
	background-position: 100% 100%
}

.big .icons {
	margin-right: 17px;
	margin-top: 15px
}

nav .icons>div {
	margin-left: auto;
	display: inline-block
}

nav .icons * {
	vertical-align: top
}

nav .icons .social {
	display: block;
	order: 2;
	margin-top: 15px
}

nav .social a.twitter-follow-button {
	display: inline-block;
	width: 62px;
	height: 20px;
	background-color: #1b95e0;
	color: #1b95e0;
	border-radius: 3px
}

nav .social div.fb-like {
	width: 49px;
	height: 20px;
	display: inline-block
}

nav .social div.fb-like:not(.fb_iframe_widget),
nav .social div.fb-like:not([fb-xfbml-state=rendered]) {
	display: inline-block !important;
	background-color: #4c69b9;
	border-radius: 3px;
	visibility: visible !important
}

nav .social .twitter-follow-button {
	margin-left: 3px
}

nav .social iframe+.twitter-follow-button {
	margin-left: -62px
}

nav .social .twitter-follow-button,
nav .icons .regular {
	position: relative !important;
	z-index: 10
}

.big nav .icons {
	display: flex;
	flex-wrap: wrap
}

.big nav .icons .regular {
	margin-left: 0
}

.big nav .icons .social {
	display: inline-block;
	order: -1;
	margin-top: 1px;
	margin-right: 1px
}

.fb-like span {
	overflow: hidden !important
}

article .share {
	margin-right: 0
}

.share {
	position: absolute;
	margin-right: 50px;
	margin-top: -1px;
	right: 0
}

.share:not(.top) {
	display: none
}

.share .facebook,
.share .twitter {
	display: inline-block;
	height: 20px;
	margin-left: 3px;
	vertical-align: bottom;
	border-radius: 2px;
	font-family: helvetica, arial, sans-serif;
	color: #fff;
	font-size: 11px;
	line-height: 19px;
	padding-right: 8px;
	padding-left: 25px;
	text-shadow: 0 1px rgba(0, 0, 0, .1);
	text-decoration: none;
	background-color: #b6aab9;
	background-image: url(../img/share.png);
	background-repeat: no-repeat
}

.share>* {
	vertical-align: top
}

.share .twitter-share-button {
	margin-left: 3px
}

.share a.twitter-share-button {
	display: inline-block;
	width: 61px;
	height: 20px;
	background-color: #1b95e0;
	color: #1b95e0;
	border-radius: 3px
}

.share div.fb-share-button {
	display: inline-block;
	width: 57px;
	height: 20px;
	background-color: #4c69b9;
	border-radius: 3px
}

.share .facebook {
	background-position: 2px top
}

.share .facebook:hover {
	background-color: #4c69b9
}

.share .twitter {
	background-position: 3px bottom
}

.share .twitter:hover {
	background-color: #1b95e0
}

.comments {
	left: 0;
	position: absolute;
	margin-right: 50px
}

section {
	position: absolute;
	right: 0;
	letter-spacing: 0;
	z-index: -1;
	max-width: 2000px
}

section {
	font-family: "VAGRoundedStd", Courier, monospace, Arial;
	font-size: 15px;
	line-height: normal
}

.big .content.overlay {
	width: 600px
}

.content.overlay {
	background-color: #fff;
	margin-top: 164px;
	width: 632px
}

article a,
.content a {
	text-decoration: underline
}

.textpage {
	padding: 13px;
	padding-left: 0
}

article .collumns div {
	float: left;
	width: 50%;
	min-height: 10px
}

.stockists article {
	padding-bottom: .5em
}

.content ul li p,
article ul li p {
	margin: 0
}

article ul li,
.content ul li {
	position: relative;
	padding-left: .75em
}

article ul li:before,
.content ul li:before {
	content: "-";
	position: absolute;
	left: 0
}

.collection article ul li,
.collection .content ul li {
	padding-left: 1em
}

.collection article ul li:before,
.collection .content ul li:before {
	content: ">";
	font-weight: bold
}

ol {
	list-style-type: decimal;
	text-indent: 1em
}

article h1,
article h2,
.content h1,
.content h2 {
	font-weight: bold
}

article h1,
.content:not(.shop) h1 {
	margin-bottom: 1em
}

article h2:not(:first-child),
.content h2:not(:first-child) {
	margin-top: 1em
}

.content:not(.preview) div.quote {
	font-size: 2em;
	margin-top: .5em
}

.content:not(.preview) div.emphasize {
	font-size: 2em;
	font-weight: bold;
	margin-top: .5em
}

.content img,
.content .video {
	width: 50%;
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
	margin-top: 1em
}

.content .video {
	position: relative;
	padding-top: 28%
}

.content .video iframe {
	position: absolute;
	top: 0;
	left: 0
}

.list-grid {
	position: relative;
	left: -15px;
	padding-right: 15px
}

.list-grid>* {
	float: left;
	display: block;
	width: 112px;
	height: 112px;
	margin-left: 15px;
	margin-bottom: 15px;
	line-height: 118px;
	border: 3px solid transparent
}

.list-grid>* span {
	display: inline-block;
	width: 100%;
	line-height: 15px;
	vertical-align: middle;
	font-weight: bold;
	font-family: "VAGRoundedStd", Courier, monospace, Arial;
	font-style: normal
}

.list-grid>a img {
	display: none
}

.list-grid>a {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	font-size: 15px;
	text-align: center;
	line-height: 108px;
	position: relative
}

.work.list-grid>a:hover,
.shop.list-grid>a,
.spaces.list-grid>a:not(:hover),
.reports.list-grid>a:hover {
	cursor: pointer;
	width: 108px;
	height: 108px;
	padding: 2px;
	line-height: 108px;
	border-width: 3px;
	border-style: solid;
	border-radius: 11px;
}

.work.list-grid>a:hover,
.spaces.list-grid>a:not(:hover),
.reports.list-grid>a:hover {
	background-image: none !important
}

.work.list-grid>a:not(:hover),
.shop.list-grid>a:not(:hover),
.spaces.list-grid>a:hover,
.reports.list-grid>a:not(:hover) {
	border-color: transparent !important
}

.shop.list-grid>a:last-child {
	margin-bottom: 3em
}

.shop.list-grid>a {
	border-color: transparent
}

.shop.list-grid>a:hover {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0
}

.shop.list-grid>a:hover span {
	position: absolute;
	top: 113px;
	padding-top: 2px;
	left: -3px;
	width: 112px;
	z-index: 2;
	font-size: 14px;
	font-weight: normal;
	color: #fff;
	border-width: 3px;
	border-style: solid;
	border-radius: 0 0 11px 11px
}

.work.list-grid>a span,
.shop.list-grid>a span,
.spaces.list-grid>a:hover span,
.reports.list-grid>a span {
	display: none
}

.work.list-grid>a:hover span,
.shop.list-grid>a:hover span,
.spaces.list-grid>a:not(:hover) span,
.reports.list-grid>a:hover span {
	display: inline-block
}

.shop.list-grid>a span:after {
	display: block;
	content: "INFO/BUY";
	font-weight: bold;
	margin-top: 2px
}

.list-grid>div span {
	width: 106px;
	margin: 12px 0;
	text-align: right;
	font-size: 28px;
	color: #bbaebb;
	line-height: 32px
}

.list-grid>div span:after {
	content: ">"
}

#list-grid-text {
	display: block;
	position: absolute;
	left: 0;
	padding: 0em 1em 1em 0;
	z-index: 2;
	background-color: #fff
}

#list-grid-text.breakout {
	position: static;
	height: auto !important;
	width: auto !important
}

.pictures,
.picture {
	display: block;
	position: relative;
	z-index: -1;
	left: 0;
	top: 0;
	margin-right: 50px;
	max-width: 2000px
}

.pictures.small,
.picture.small {
	width: 628px
}

.js .picture,
.pictures.nobar {
	margin-bottom: -41px
}

body:not(.js) .pictures {
	margin-bottom: 1em
}

.picture+.share+.content,
.pictures+.share+.content,
.picture+.content,
.pictures+.content {
	margin-top: 0
}

.picture+.content,
.js .pictures.nobar+.content {
	padding-top: 1em
}

.js .pictures:after,
.js .picture:after {
	display: block;
	content: "";
	padding-top: 62.2%;
	padding-bottom: 41px
}

.pictures.nobar:after,
.picture.nobar:after {
	padding-bottom: 0
}

.image {
	position: absolute;
	top: 0;
	bottom: 41px;
	left: 0;
	right: 0;
	background-color: #fff;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left
}

.pictures .wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0
}

.pictures img,
.picture img,
.pictures .video,
.picture .video {
	width: 100%
}

.pictures img,
.picture img {
	display: none !important
}

.image iframe {
	width: 100%;
	height: 92%;
	position: relative;
	top: 8%
}

.pictures .image.visible {
	opacity: 1;
	transition-delay: 0s !important;
	transition-duration: 1s
}

.pictures.manual .image:not(.visible) {
	transition-delay: .3s
}

.pictures.manual .image.visible {
	transition-duration: .25s
}

.swipeshow,
.swipeshow .slides,
.swipeshow .slide {
	transform: translate3d(0, 0, 0);
	box-sizing: border-box
}

.swipeshow img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.swipeshow .slides {
	height: 100%
}

.swipeshow,
.swipeshow .wrapper {
	overflow: hidden
}

.swipeshow .slide {
	visibility: hidden
}

.swipeshow .slide:first-child {
	visibility: visible
}

.overlay {
	padding: 13px;
	padding-left: 0;
	padding-top: 0;
	position: relative;
	z-index: -1
}

.overlay.preview {
	padding-bottom: 2em;
	width: 615px
}

.bar {
	background-color: #fff;
	overflow: hidden;
	z-index: 9999;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 13px;
	padding-right: 0
}

.bar {
	height: 15px
}

.bar .count {
	float: right
}

.bar .count {
	position: relative;
	left: 2px;
	margin-left: .5em;
	color: #b6aab9;
	width: auto
}

.bar .count:before {
	content: attr(data-current)
}

.bar .count:after {
	content: attr(data-total)
}

.bar .count:before,
.bar .count:after {
	font-weight: bold;
	font-style: normal;
	color: #000
}

.bar .title {
	color: #000;
	position: relative;
	top: -2px;
	padding-top: 0;
	width: auto;
	display: inline-block
}

.bar .title a {
	text-decoration: underline
}

a.previous,
a.next {
	float: right;
	display: inline-block;
	width: 22px;
	height: 24px;
	text-indent: -1000000px;
	background-image: url(../img/arrows.png);
	margin-left: .5em;
	position: relative;
	left: 2px
}

a.previous,
a.next,
span.count {
	top: -5px
}

a.previous {
	margin-left: .25em;
	background-position: left top
}

a.next {
	background-position: right top
}

.studio a.previous:hover {
	background-position: left 33.333%
}

.studio a.next:hover {
	background-position: right 33.333%
}

.collection a.previous:hover {
	background-position: left 66.666%
}

.collection a.next:hover {
	background-position: right 66.666%
}

.salon a.previous:hover {
	background-position: left bottom
}

.salon a.next:hover {
	background-position: right bottom
}

article {
	position: relative
}

.big .list-cards {
	padding-top: 2em
}

.list-cards.table {
	margin-left: -2em;
	margin-top: -2em;
	border-collapse: separate;
	border-spacing: 2em;
	overflow: hidden
}

.list-cards.table>div {
	margin-bottom: -2em
}

.list-cards.table>div>* {
	display: table-cell !important
}

.list-cards.table>div:last-child article {
	border-bottom: none
}

.list-cards.preview>article:first-child:before,
.list-cards.preview>div:first-child article:first-child:before {
	display: block;
	content: "";
	height: 1px;
	width: 100%;
	background: #b6aab9;
	position: relative;
	top: -2em
}

.list-cards article {
	display: inline-block;
	width: 628px;
	min-width: 628px;
	max-width: 628px;
	vertical-align: top;
	float: left;
	margin-right: 2em;
	padding-bottom: 2em;
	border-bottom: 1px #b6aab9 solid;
	margin-bottom: 2em
}

.list-cards article img,
.list-cards article .video {
	height: 391px;
	margin-bottom: 17px
}

.list-cards article .video {
	display: inline-block;
	width: 100%
}

.list-cards.grid article {
	float: none;
	margin-right: 0 !important
}

.component-list a img,
.component-list a .video {
	display: none !important
}

.extra-bar.preview {
	position: relative;
	height: 1.5em;
	margin-bottom: 1em;
	margin-top: -1em
}

.extra-bar {
	width: 100%;
	height: 2em
}

.read-more {
	margin-left: .3em
}

.read-more:after {
	content: " >"
}

.preview>.comments-count {
	margin-right: 50px;
	bottom: 0
}

.comments-count {
	position: absolute;
	bottom: 1.5em;
	right: 0;
	text-decoration: none
}

.comments-count:before {
	content: url(../img/comments.png);
	vertical-align: middle;
	margin-right: 2px
}

#contact-text {
	display: flex;
	flex-wrap: wrap;
	line-height: 19px;
	margin-top: 0
}

#contact-text b {
	line-height: 18px
}

#contact-text>div {
	position: relative;
	flex: 1;
	margin-bottom: 1em
}

#contact-text .contact-credits {
	margin-top: auto;
	flex: auto;
	width: 100%
}

form {
	display: block;
	background-color: #ae923c;
	padding: 1em;
	color: #fff;
	border-radius: 11px;
	margin-top: 1em;
	position: relative
}

form h1 {
	letter-spacing: 1px
}

form .collumns>div {
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	vertical-align: top
}

form .collumns>div {
	padding-left: 1em
}

form .collumns>div:first-child {
	padding-left: 0
}

form .collumns.three>div {
	width: 33%;
	padding-left: 0;
	text-indent: .25em
}

form .collumns.three>div:nth-child(2) {
	text-indent: .5em
}

form .collumns.three>div:last-child {
	width: 34%;
	text-indent: 1em;
	padding-right: 0
}

form .field {
	margin-bottom: .5em;
	padding: .25em;
	position: relative
}

form .field:last-child {
	margin-bottom: 0
}

form .field>div.wrapper {
	position: absolute;
	right: 0;
	left: 110px;
	top: 0
}

input[type=text],
input[type=number],
input[type=email],
form select,
.wrapper span {
	display: block;
	background-color: #fff;
	padding: .25em;
	border: none;
	border-radius: 1px;
	width: 100%;
	box-sizing: border-box;
	color: #000
}

.wrapper span {
	background: none;
	color: #fff;
	padding-left: 0;
	padding-right: 0
}

form select {
	height: 26.5px
}

form label[for] {
	cursor: pointer
}

/* Het pricelists-formulier is een CF7-formulier; de plugin UACF7 zet `.wpcf7-form label` op
   display:block, waardoor de radio-labels onder de bolletjes vielen. Live: inline. */
form.wpcf7-form label {
	display: inline
}

form input[type=checkbox],
form .field div.checkbox {
	display: inline-block;
	position: relative;
	top: 3px;
	width: 15px;
	height: 15px;
	margin-right: .5em
}

form .field div.checkbox {
	background-color: #fff;
	border-radius: 3px;
	cursor: pointer
}

form .field div.checkbox.checked:before {
	display: block;
	border: 3px solid;
	border-color: #ae923c;
	background-color: #ae923c;
	width: 3px;
	height: 3px;
	margin-left: 3px;
	margin-top: 3px;
	content: "";
	border-radius: 2px
}

form input[type=radio],
form .field div.radio {
	display: inline-block;
	position: relative;
	top: 3px;
	width: 15px;
	height: 15px;
	margin-right: .5em
}

form .field div.radio {
	background-color: #fff;
	border-radius: 7px;
	cursor: pointer
}

form .field div.radio.checked:before {
	display: block;
	border: 3px solid;
	border-color: #ae923c;
	background-color: #ae923c;
	width: 3px;
	height: 3px;
	margin-left: 3px;
	margin-top: 3px;
	content: "";
	border-radius: 5px
}

form button {
	cursor: pointer;
	color: #ae923c;
	font-weight: bolder;
	letter-spacing: 2px;
	text-align: left;
	background-color: #fff;
	width: 296px;
	padding: .5em;
	position: absolute;
	right: 3px;
	bottom: 3px;
	border-bottom-right-radius: 8px
}

form button:before {
	position: relative;
	content: ">";
	margin-right: .5em;
	transition: left .1s
}

form button:hover:before {
	left: 90%
}

/* Prijsaanvraag op de productpagina: op desktop rechts naast de tekst, in één kolom (verzoek Lars
   06-10-2026). Tot 927px (mobile.css) blijft het formulier onder de tekst. */
@media only screen and (min-width: 928px) and (min-device-width: 928px) {
	.content.shop {
		display: flex;
		align-items: flex-start;
		gap: 1em
	}

	.shop-text {
		flex: 1;
		min-width: 0
	}

	.shop-price-request {
		flex: 0 0 372px
	}

	.shop-price-request form {
		margin-top: 0;
		padding-bottom: 38px
	}

	.shop-price-request form .collumns>div {
		display: block;
		width: 100%;
		padding-left: 0
	}

	.shop-price-request form .collumns>div+div {
		margin-top: .5em
	}

	.shop-price-request form button {
		left: 3px;
		width: auto
	}
}

:not(#shop-form)>.error:not(:first-child) {
	margin-top: 1em
}

.error {
	display: block;
	border: 3px solid #d86565;
	padding: 1em;
	color: #c72d2d;
	border-radius: 11px;
	margin-bottom: 1em
}

.error:before {
	display: block;
	font-weight: bold;
	letter-spacing: 1px;
	content: "something went wrong"
}

.success:not(:first-child),
.notice:not(:first-child) {
	margin-top: 1em
}

.success,
.notice {
	display: block;
	border: 3px solid #ae923c;
	padding: 1em;
	color: #ae923c;
	border-radius: 11px;
	margin-bottom: 1em
}

.success li,
.notice li {
	margin-left: 1em
}

.success li::before,
.notice li::before {
	content: ">";
	margin-left: -1em;
	margin-right: .5em
}

#shop-item-form {
	position: absolute;
	right: 1em;
	width: 372px
}

#shop-item-form .notice {
	display: none;
	margin-bottom: 0;
	padding-left: 1.5em
}

#shop-item-form .notice:before {
	content: "*";
	position: relative;
	left: -0.7em;
	margin-right: -0.6em
}

form.shop {
	padding: .75em;
	padding-bottom: 3px;
	margin-top: 0;
	z-index: 1
}

.error+form.shop,
.success+form.shop {
	margin-top: 1em
}

form.shop .collumns>div:not(:first-child) {
	padding-left: .5em;
	margin-left: 50%;
	position: relative;
	min-height: 7em;
	padding-bottom: 3em
}

form.shop .collumns>:first-child {
	position: absolute;
	left: 3px;
	right: 50%;
	top: 3px;
	bottom: 3px;
	background: #fff;
	border-radius: 8px 0 0 8px
}

form.shop h1 {
	padding: .8em;
	margin-bottom: 0;
	height: 3em;
	font-weight: normal;
	color: #ae923c
}

form.shop .field>.wrapper {
	left: 70px;
	right: 0
}

form.shop .collumns>div:last-of-type .field>.wrapper {
	left: 63px
}

form.shop button {
	height: 30px;
	font-size: 12px;
	position: absolute;
	right: -8px;
	bottom: 0px;
	height: 44px;
	margin-left: -1px;
	width: 176px;
	padding: 6px;
	padding-top: 7px;
	text-align: center
}

form.shop button:before {
	content: none
}

form.shop output.numeric:before {
	content: "€";
	margin-right: 2px
}

form.shop output.numeric.indicative:before {
	content: "± €"
}

form.shop output.numeric.indicative:after {
	content: "*"
}

form.shop output {
	position: absolute;
	right: 0
}

form.shop input[name=amount] {
	position: absolute;
	top: 0;
	left: 63px;
	width: 20px;
	text-align: center
}

.video iframe {
	width: 100%;
	height: 100%
}

.cart-product {
	display: block;
	min-height: 100px;
	position: relative;
	padding-left: 130px;
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px #b6aab9 dashed;
	transition: color .5s
}

.cart-product a {
	font-weight: bold
}

.cart-product.updating {
	color: #b6aab9
}

.cart-product.updating .cart-thumbnail {
	-webkit-animation: pulsate-fade 1s infinite ease-in-out;
	animation: pulsate-fade 1s infinite ease-in-out
}

.indicative td.cart-price,
.indicative td.cart-total {
	color: #ae923c
}

.indicative td.cart-price::before {
	content: "± "
}

.indicative td.cart-total::before {
	content: "± €"
}

.cart-thumbnail,
.product-ghost {
	display: block;
	width: 95px;
	height: 95px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 6px
}

.product-ghost {
	z-index: 110;
	position: absolute;
	border: 10px #fff solid;
	box-shadow: 0 .5em 1em rgba(0, 0, 0, .3);
	transform: scale(0);
	transition-property: transform;
	transition-duration: .5s
}

.product-ghost.flying {
	transform: scale(1)
}

#cart-content {
	list-style-type: none
}

#cart-content table {
	line-height: 1.5em
}

#cart-content th {
	color: #b6aab9
}

#cart-content tr>:last-child {
	position: absolute;
	right: 0
}

#cart {
	padding-right: 1em;
	padding-bottom: 1em
}

#cart .collumn-button {
	width: 17px
}

#cart .collumn-price {
	width: 70px
}

#cart .collumn-quantity {
	width: 50px
}

#cart #cart-empty {
	display: none
}

#cart h1 {
	margin-bottom: 1em;
	text-transform: uppercase
}

#cart th,
#cart td {
	padding-right: 1em
}

#cart tr>:last-child {
	text-align: right
}

#cart button {
	background: #fff;
	border-radius: 2px;
	border-radius: 2px;
	cursor: pointer;
	height: 21px;
	border: 1px solid #b6aab9;
	line-height: 1em;
	position: relative;
	top: -1px;
	color: #b6aab9;
	text-align: center;
	padding: 0 .25em
}

#cart.empty ul,
#cart.empty table,
#cart.empty button {
	display: none
}

#cart.empty #cart-empty {
	display: block
}

#cart-form span {
	display: block;
	text-align: center;
	margin-bottom: 1em;
	margin-top: 1em;
	margin-left: 7em;
	opacity: .5;
	text-transform: uppercase
}

#cart.empty+#cart-form {
	display: none
}

#cart-calculations {
	width: 100%
}

#cart-calculations button {
	margin-left: 1em
}

#cart-calculations td:first-child:not(.explanation) {
	width: 110px
}

#cart-calculations th {
	font-weight: bold;
	width: 40px
}

#cart-calculations .explanation {
	color: #b6aab9
}

.cart-total {
	width: 85px
}

td.cart-total:before {
	content: "€";
	float: left;
	color: #000;
	font-style: normal
}

.cart-label {
	color: #b6aab9
}

input.cart-quantity {
	display: inline-block;
	width: 2.2em;
	border-bottom: 1px solid #b6aab9;
	margin-bottom: 0px;
	padding: 0;
	padding-left: .25em;
	background-color: rgba(182, 170, 185, .17)
}

.cart-quantity:not(.uncommitted) {
	transition: background-color .1s, color .1s
}

.cart-quantity.uncommitted {
	background-color: #b6aab9;
	color: #fff
}

button.cart-delete:before {
	content: "x";
	width: 22px;
	font-weight: bold
}

#cart-form {
	margin-right: 1em
}

#cart-form form {
	margin-top: 0
}

#cart-form h1 {
	text-transform: uppercase;
	margin-bottom: 1em
}

#cart-form .wrapper {
	right: .5em
}

@media only screen and (min-width: 1450px) {
	#cart {
		position: absolute;
		left: 0;
		right: 400px;
		padding-right: 3.5em;
		box-sizing: border-box
	}

	#cart-form {
		position: absolute;
		right: 0;
		width: 400px;
		margin-top: 0
	}
}

#cart-form {
	margin-bottom: 1em
}

#cart-form button {
	margin-top: 1em;
	border: 2px solid #ae923c;
	background-color: #fff;
	color: #000;
	padding: 1em;
	padding-left: 1.2em;
	padding-right: 4em;
	border-radius: .5em;
	font-weight: bold;
	width: 100%;
	cursor: pointer;
	text-transform: uppercase;
	position: relative;
	text-align: left
}

#cart-form button:after {
	text-align: center;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 1em;
	background-color: #ae923c;
	color: #fff;
	content: " »";
	font-size: 2em;
	font-weight: normal;
	padding: .2em .5em;
	border-radius: 0 5px 5px 0;
	transition: all .15s
}

#cart-form button:hover:after {
	background-color: #fff;
	color: #ae923c;
	padding-right: 0em;
	padding-left: 0em
}

#cart-form #cart-button-back {
	border-color: #000;
	margin-top: .5em
}

#cart-form #cart-button-back:after {
	content: "«";
	background-color: #000
}

#cart-form #cart-button-back:hover:after {
	color: #fff;
	padding-right: 3em;
	padding-left: .5em
}

#cart-form table {
	width: 100%;
	line-height: 1.5em;
	text-align: left
}

#cart-form table+h1 {
	margin-top: 1em
}

#cart-form th {
	color: #b6aab9
}

#cart-form #cart-form-final {
	display: none
}

.cart-icon {
	background: url(/img/cart.png);
	background-position: center 55%;
	background-size: 64%;
	background-repeat: no-repeat;
	background-color: #fff;
	width: 40px;
	height: 40px;
	border: 2px solid #000;
	border-radius: 50%;
	position: absolute;
	right: 107px;
	top: -5px;
	display: inline-block;
	transition: transform .1s
}

.big .cart-icon {
	top: -48px;
	right: -2px
}

.cart-icon[data-count]:after {
	content: attr(data-count);
	background: #000;
	color: #fff;
	width: 1em;
	height: 1em;
	display: block;
	text-align: center;
	border-radius: 50%;
	padding: 3px;
	position: absolute;
	top: -5px;
	right: -5px;
	transition: transform .1s;
	font-size: 14px;
	line-height: 1.1em;
	font-weight: normal
}

.cart-icon.selected {
	background-image: url(/img/cart-selected.png);
	border-color: #ae923c
}

.cart-icon.selected:after {
	background-color: #ae923c
}

.cart-icon:hover {
	transform: scale(1.1)
}

.cart-icon:hover:after {
	transform: scale(0.9)
}

#logo .cart-icon {
	display: none
}

.pricezone {
	width: 100%;
	position: absolute;
	top: 4.5em;
	bottom: 0px
}

.pricezone a {
	width: 50px;
	height: 45px;
	display: inline-block;
	background: url(/img/pricezones.png);
	background-size: auto 200%;
	background-repeat: no-repeat;
	background-position: top;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	cursor: pointer
}

.pricezone a:first-child {
	margin-left: 5%
}

.pricezone a:nth-child(2) {
	left: 50%;
	margin-left: -25px
}

.pricezone a:last-child {
	right: 0;
	margin-right: 5%
}

.pricezone a[data-pricezone=nl] {
	background-position: left top
}

.pricezone a[data-pricezone=nl]:hover,
.pricezone a[data-pricezone=nl].selected {
	background-position: left bottom
}

.pricezone a[data-pricezone=eu] {
	background-position: center top
}

.pricezone a[data-pricezone=eu]:hover,
.pricezone a[data-pricezone=eu].selected {
	background-position: center bottom
}

.pricezone a[data-pricezone=ww] {
	background-position: right top
}

.pricezone a[data-pricezone=ww]:hover,
.pricezone a[data-pricezone=ww].selected {
	background-position: right bottom
}

#floating-button {
	display: none;
	position: absolute;
	overflow: hidden;
	height: 118px;
	width: 118px;
	box-sizing: border-box;
	border-radius: 50%;
	font-family: VAGRoundedStd;
	font-weight: bold;
	text-align: center;
	line-height: 1.3em;
	color: #fff;
	z-index: 100;
	-webkit-animation: pulsate 4s infinite ease-in-out;
	animation: pulsate 4s infinite ease-in-out;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.big #floating-button {
	display: block
}

.studio #floating-button {
	left: 68px;
	top: 261px
}

.salon #floating-button {
	left: 60px;
	top: 190px
}

.collection #floating-button {
	left: 72px;
	top: 208px
}

@keyframes "pulsate" {
	0% {
		transform: scale(1, 1)
	}

	50% {
		transform: scale(0.9, 0.9)
	}

	100% {
		transform: scale(1, 1)
	}
}

@-webkit-keyframes "pulsate" {
	0% {
		transform: scale(1, 1)
	}

	50% {
		transform: scale(0.9, 0.9)
	}

	100% {
		transform: scale(1, 1)
	}
}

@keyframes "pulsate-fade" {
	0% {
		opacity: 1
	}

	50% {
		opacity: .2
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes "pulsate-fade" {
	0% {
		opacity: 1
	}

	50% {
		opacity: .2
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes "receive-product" {
	0% {
		transform: scale(1)
	}

	25% {
		transform: scale(0.8)
	}

	60% {
		transform: scale(1.15)
	}

	100% {
		transform: scale(1)
	}
}

@keyframes "receive-product" {
	0% {
		transform: scale(1)
	}

	25% {
		transform: scale(0.8)
	}

	60% {
		transform: scale(1.15)
	}

	100% {
		transform: scale(1)
	}
}

.receive-product {
	-webkit-animation: receive-product 1s ease-in-out;
	animation: receive-product 1s ease-in-out
}


.spaces.list-grid>a:not(:hover) {
	border-color: #ae923c;
}


/* ── Factsheets (page-factsheets.php) ──
   Zelfde `.list-cards` als live: gefloate artikelen van 628px + 2em marge, die vanzelf
   onder elkaar vallen op een smal scherm. Feedback Ineke Hans 31-08-2026, punt 13: hoogstens
   twee families naast elkaar (live toont er op een breed scherm drie). 2 × (628px + 2em). */
.page-id-3417 .list-cards {
	max-width: calc(2 * (628px + 2em));
}


/* ── Feedback Ineke Hans, punt 10: klantnamen automatisch afbreken ───────────
   De koppen boven de blokken in de client-views staan op 28px in een kolom van 106px.
   Live lost dat op met spaties die met de hand in het woord zijn gezet ('swa rovski',
   'haags gem.mu seum'). Hiermee breekt een te lang woord vanzelf af, zodat een nieuwe
   klantnaam niet meer handmatig opgeknipt hoeft te worden. */
.list-grid>div span {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ── Feedback Ineke Hans 31-08-2026, punt 7/8 en 9 ──────────────────────────
   Beide op verzoek van Lars teruggezet naar live: punt 7/8 (leestekst en submenu
   17px) op 24-09-2026, punt 9 (work-grid vast op 9 per rij, max-width 1197px) op
   29-09-2026. Het work-grid loopt nu weer vloeiend mee met de vensterbreedte, tot de
   max-width van 2000px op `section`, zoals live. */