/** Shopify CDN: Minification failed

Line 1893:0 Unexpected "`"

**/
/* Rock Lobster Syndicate custom css 
https://community.shopify.com/c/Shopify-Design/Here-is-how-to-create-a-custom-CSS-file/td-p/441602 */

/* Collection Pages */
.navigation--container{
  padding-top: 10px;
  margin-bottom: -10px !important;
  display: flex !important;
  flex-flow:column;
  margin: unset !important;
}
  @media only screen and (min-width: 500px){
   .collection--body--root{ 
     padding-bottom: 32px;
  }
}
ul.breadcrumbs--root{
  font-size: 12px;
}
/* Filter menu */
.collection--header--container{
  display: flex;
  flex-flow: row;
  padding-left: 20px;
  padding-right: 20px;
}
.filter--link{
  display: inline-flex;
  background-color: #e7e7e7;
  margin: 5px;
  border-radius: 16px;
  text-transform: lowercase;
}
.filter--link > label{
  padding: 2px 10px !important;
}
.filter--link > label > span{
  min-width:30px;
  text-align: center;
}
input:checked+.filter--label:not([data-item=swatch]){
  background-color:#c7c7c7 !important;

}
.navigation--filter--container{
  flex-flow: row;
  display:flex;
}
.navigation--title{
  display: flex;
  align-items: flex-end;
  min-width:30%;
  margin: 0 auto 0 0 !important;
}
.navigation--tags-container{
  padding:0;
}
.navigation--active-tags[data-item]{
  flex-direction: row-reverse;
  margin-right: -3px;
  padding-top: 10px;
}
.navigation--title > h1{
  margin: 0 !important;
  font-size: 14px;
  color: #b8b8b8;
  font-weight: 500;
}
.navigation--filter{
  margin-left: auto;
  margin-right: 10px;
}
@media only screen and (max-width: 500px){
  .navigation--filter--container > .navigation--filter, .navigation--filter--container >.navigation--layout{
    display:none;
  }
}
.layout--main-content{
  min-height: unset !important;
}
@media only screen and (min-width: 500px){
.navigation--root{
  display: flex !important;
  flex-flow: row-reverse;
  margin-left: auto;
}
}
@media only screen and (max-width: 500px){
  .navigation--root{
    display: flex !important;
    flex-flow: row-reverse;
  }
  .navigation--container{
    flex-flow: row-reverse;
    padding: 0 !important;
    align-items: center;
  }
  .navigation--tags-container{
    padding-top:5px;
  }
  .navigation--active-tags[data-item]{
    align-items: flex-end;
    justify-content: flex-end;
    margin-left:auto;
    flex-direction: row-reverse;
  }
  .navigation--active-clear{
    margin:3px !important;
  }
}

@media only screen and (max-width: 500px){
  .collection--header--container{
    flex-flow: column !important;
  }
  .navigation--mobile-button{
    margin-right: auto;
    margin-left: unset !important;
  }
  .navigation--tags-container{
    align-items: flex-start !important;
  }
}
.navigation--active-tag:not(:last-child){
  margin:3px !important;
}
.navigation--mobile-button{
  margin-left: auto;
}
.navigation--layout{
  margin-left: unset !important;
}
.navigation--tags-container{
  display: flex;
  align-items: flex-end;
}
.filter--toggle{
  font-size:12px !important;
  font-weight:800;
}
ul.filter--menu{
  margin-left:20px;
}
@media only screen and (max-width: 500px){
.navigation--mobile-header{
  padding: 0!important;
  flex-direction: column !important;
  gap: 0;
  margin-left: auto;
}
navigation-root.navigation--root{
    padding:15px 15px 0px 15px!important;
    align-items:center;
  }
}
.filter--category.availability, .filter--category.beschikbaarheid{
  display: none;
}
/**** Header ****/
.split-announcements--heading{
  text-transform: unset !important;
  padding: 3px 0;
}
.announcement--wrapper {
  padding: 5px;
}
[data-hover-disabled=false] .x-menu--level-1--link>a:after{
  display:none;
}
.header--root {
  padding-top: 10px;
  padding-bottom: 10px;
}
.header--container{
  padding:20px !important;
}
.x-menu--level-1--link>a {
  padding: 10px !important;
}
[data-item=nav-text] {
  font-size: 11px;
}

.x-menu--mega-column h3.x-menu--mega-column--title{
  margin: 0;
  margin-bottom:6px;
}

.x-menu--mega-column h3.x-menu--mega-column--title a{
  text-transform: none !important;
  display: inline-block;
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-transform: none !important;
  font-family: var(--font--paragraph--family);
  font-weight: var(--font--paragraph--weight);
  font-style: var(--font--paragraph--style);
  letter-spacing: 0px;
}

li.x-menu--level-1--link a{
  text-transform: uppercase !important;
}
li.x-menu--level-2--link a{
  text-transform: none !important;
  padding: 0 !important;
  transition: 0.35s;
}
li.x-menu--level-2--link a:hover, .x-menu--mega-column h3.x-menu--mega-column--title a:hover{
  opacity:0.5;
  text-decoration: underline;
}
/* Search module */
@media only screen and (max-width: 500px){
  .predictive-search--container{
    grid-gap: 5px !important;
    padding-left: 15px;
  }
  .predictive-search--heading{
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 15px;
  }
  .predictive-search--feedback{
    font-size: 12px !important;
    padding-left: 15px;
  }
  .predictive-search--item > .search--text{
    font-size: 12px;
  }
  .search--results>*{
    padding-top: 15px;
  }
}
@media only screen and (min-width: 500px){
  .predictive-search--container{
    grid-gap: 0 !important;
  }
  .predictive-search--heading{
      justify-content: center;
      font-size: 16px;
      font-weight: 600;  
  }
  .predictive-search--item{
    text-align: center;
    border-radius: 8px;
    transition: var(--transition--fade-in);
    background-color: transparent;
  }
  .predictive-search--item:hover{
    background-color: #80808020;
  }
  .predictive-search--item > .search--text, .predictive-search--feedback{
    font-size: 14px;
    margin-bottom: 3px;
    display:inline-block;
    width: 100%;
  }
  .predictive-search--feedback{
    font-size: 14px !important;
    text-align: center;
  }
  .predictive-search--item:hover .search--text:after{
    visibility: visible !important;
  }
  
  .search--text:after{
    content: "";
    border-bottom: 1.5px solid;
    background-color: transparent;
    visibility: hidden;
    width: 150px;
    display: flex;
    margin: auto;
  }
}
/**** Home page ****/   
#shopify-section-162062620665c87507 > [data-section-id] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
#shopify-section-162062620665c87507 .featured-grid--item:nth-child(2)[data-wide="true"] .featured-grid--item--image {
	padding-bottom: 0 !important;
}
#shopify-section-162062620665c87507 .featured-grid--item:nth-child(2)[data-wide="true"] .featured-grid--item--overlay-background {
  height: 100% !important;
}
@media only screen and (min-width: 500px){
.featured-content--container > .featured-content--image > .image--root > img{
  height: unset !important;
}
}
/**** Shop page ****/
.collection--navigation--root[data-show-navigation=false] {
  padding-top: 0;
}
[data-container=panel] {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
[data-container=block] {
  margin-bottom: 0;
}
[data-section-id] {
  padding-left: 0px;
  padding-right: 0px;
}

@media only screen and (min-width: 500px) {
  /* For mobile phones: */
  [data-section-id] {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.mobile-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .mobile-only {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .product--details-container {
    position: relative !important;
  }
  .product--details{
    flex-flow:column !important;
    align-items:flex-start !important;
    gap:0 !important;
  }
  .product--title,  .product--price{
    font-size: 14px !important;
  }
  .product--price-container{
    margin-left:0 !important;
  }
}

li[data-name="filter.v.availability"] {
    display: none !important;
}

.product--details-container {
  position: absolute;
  bottom: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}
.product--price-container{
  margin-left: auto;
}
.radios--root[data-is-swatches=true]{
  display: none;
}
.product--details-container .product--title, .product--details-container .product--price-container * {
	font-size: 12px;
}
.product--details-container .product--title {
  order: 2;
}
.product--root[data-product-view=grid][data-text-alignment=left] .product--details {
	align-items: flex-end;
  order: 2;
  flex-flow: row;
}
.product--quick-add {
  bottom: auto;
  top: 10px;
}
.collection--body--root{
  padding-top:10px !important;
}
/**** Single product ****/
[data-product-block]{
  margin-top: unset !important;
}
.product-page--wrapper{
  gap: unset !important;
}
.product-page--right-column {
  padding-top: 20px;
}
.product-page--title {
  font-size: 22px;
}
@media only screen and (max-width: 640px) {
  .product-page--title{
  	font-size: 18px;
    text-align: left;
  }
}
.product-page--form{
  position: sticky;
  flex: 1;
  align-self: start;
  overflow-y: auto;
  display: flex;
  flex-flow: column;
  min-height:100vh;
  max-height: 100vh;
}
.product-page--carousel{
  max-width: 100vw;
}
.product-buy-buttons--root{
  margin: 15px 0;
}

.product-buy-buttons--primary, span.product-buy-buttons--cta-text{
  background: none !important;
  width: 100%;
  padding: unset !important;
  color: #fff !important;
  transition: 0.25s !important;
}

.product-buy-buttons--primary:hover > span.product-buy-buttons--cta-text{
  background:#222 !important;
  color: #fff !important;
}

[data-transition-button][data-item=button i]:hover:not([disabled]):not([aria-busy=true]){
  color: #fff;
}
[data-transition-button][data-item=button i]:after{
  background:none !important;
}

@media only screen and (max-width: 500px) {
  .product-page--form{
    padding: 0 15px;
    overflow: unset !important;
    max-height: unset !important;
    height: unset !important;
    position: relative;
  }  	
}
@media only screen and (min-width: 500px) {
  .product-page--form{
    padding: 15px;
  }
  .collapsible-row--root{
    margin: 15px 0 30px 0;
  }
}
.product-page--root .product-form--price-container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding-bottom: 10px;
}
.product-form--price-wrapper {
  padding-right: 10px;
}
.product-form--price {
  font-size: 15px;
}
.product--tax-included {
  padding-top: 0;
  font-size: 11px;
  line-height: 1.2;
}
.social-icons--root{
  padding-bottom: 60px;
}
div.station-tabs div.station-tabs-tabcontent{
  margin: 0 !important;
}
span.station-tabs-tabtext{
  font-size: 12px !important;
}
.station-tabs-tabcontent > div > div > div > p, .station-tabs-tabcontent{
  font-size: 12px;
  line-height: 1.5em;
}
.radios--container>:not(:last-child) {
  padding-right: 8px;
}
.radios--main {
  padding-bottom: 8px;
}
.radios--value-button>* {
	line-height: 1em; 
}
.product-options--option > .radios--root > .radios--container > .radios--main{
  padding:0;
}
.product-options--option > .radios--root > .radios--container > .radios--main > .radios--value-button{
  padding: 6px 10px;
  font-size: 13px;
  min-width: 40px;
  min-height: 40px;
}

.product-price--wrapper{
  padding: 10px 0;
}

@media screen and (min-width: 767px){
.product-price--original, .product-price--compare{
  font-size: 20px;
}
}

@media screen and (max-width: 767px) {
  /* De dynamisch aangemaakte sticky balk onderaan */

.product-price--wrapper{
  padding:0 !important;
}

.product-price--original, .product-price--compare{
    padding:0 !important;
    font-size: 14px !important;
  }
  .mobile-sticky-buy-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-top: 30px;
    border-radius: 12px 12px 0 0;
    
    /* Z-index & iOS Safari 3D rendering fix */
    z-index: 99 !important;
    transform: translateZ(9999px) !important;
    -webkit-transform: translate3d(0, 0, 9999px) !important;

    /* Vormgeving */
    background-color: #ffffff !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.12) !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;

    /* Ruimte voor de swipe-streep op moderne iPhones */
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;

    /* Dwingt de exacte volgorde af: Opties boven, Koopknop onder */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Reset marges van de verplaatste blokken */
  .mobile-sticky-buy-bar .product-page--block {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Zorgt dat de footer/content onderaan de pagina niet bedekt wordt */
}

@media only screen and (min-width: 500px){
  .product-price--tax{
    padding:0 !important;
  }
  .product-page--form{
    padding-top: 10px !important;
  }
}
.product-options--option > .radios--root > .radios--container{
  gap: 10px;
}
@media only screen and (max-width: 500px){
  .product-options--option > .radios--root > .radios--container{
    gap: 8px;
  }
  .product-options--option > .radios--root > .radios--container > .radios--main > .radios--value-button{
    width: 35px;
    padding: 3px;
  }
}
.product-page--description {
  padding-top: 20px;
  font-size: 14px;
}
.product-page--description p {
  padding-bottom: 10px !important;
}
.social-share--root[data-position=product] {
  padding-top: 10px;
}
.social-share--root[data-position=product] .social-share--title {
  padding-bottom: 5px;
}
.product-recommendations--body .image--container {
  padding-top: 140% !important;
}
.product-recommendations--body .image--container img {
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .product-page--right-column {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 500px){
.recent-products--root, .related-products--root{
  padding-top: 32px;
}
}
/* Section layout */

@media only screen and (max-width: 768px){
.stacked-text--root{
  width: unset !important;
}
.carousel--x-container{
  z-index:0;
}
}
@media only screen and (min-width: 768px){
.stacked-text--root{
  width: 100% !important;
}

}
/* lists */
.stacked-text--description > ul{
  display: list-item;
  padding-left: 15px;
}

@media only screen and (max-width: 500px){
h2.stacked-text--title{
  font-size: 16px; 
}
.stacked-text--description > .metafield-rich_text_field > p, .metafield-rich_text_field > ul > li{
  text-align: left;
  font-size: 12px !important;
}
  .stacked-text--description > .metafield-rich_text_field > ul{
    padding-left: 15px;
  }
  .stacked-text--wrapper{
    align-items: flex-start;
  }
}
.stacked-text--wrapper{
    align-items: flex-start !important;
  }
.stacked-text--description{
  text-align: left !important;
}
.stacked-text--description > .metafield-rich_text_field > p{
  font-size: 14px;
}

.stacked-text--description > .metafield-rich_text_field > ul > li{
  margin: 10px 0;
  display: list-item;
  list-style-position: outside;
  list-style-type: square;
  text-align: left;
  font-size: 14px;
}
/* Size Chart Table */
table.size-chart{
  display:table;
  margin-top: 20px;
  width: 100%;
  text-align: center;
  border-collapse:collapse;
  border:none;
}
table.size-chart > tbody > tr > th{
    width: 20%;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1em;
    font-weight:600;
    border-width: 0 0 1px 0 !important;
    
}

table.size-chart > tbody > tr > td{
    border-width: 0 0 1px 0 !important;
}
  table.size-chart > tbody > tr > td{
    font-size: 10px;
  table.size-chart > tbody > tr > td, table.size-chart > tbody > tr > th{
    border-width: 0px 0px 1px 0px !important;
    border-bottom-color: #d5d5d5;
    font-family: var(--font--accent--family);
    font-weight: 500;
    font-style: var(--font--accent--style);
  }
}
/* Custom meta fields configuratin bij seb@developr.nl  */
.product__icons{
  display: flex;
  justify-content: space-between;
}
.product__extended-image{
  align-items: center;
  text-align: center;
  max-width: 30%;
  flex: 30%;
}
.product__extended-image img{
	width: 80%;
}

.product__extended-title{
  display:block;
  line-height: 1.2;
  padding-left: 0px;
  font-size: 8px;
  text-align: center;
  

}
/**** Footer ****/
footer.footer--root, div.footer--blocks, div.footer--sub{
  max-width: 100vw;
}
footer.footer--root > div.footer--blocks, footer.footer--root > div.footer--sub{
    max-width: 100vw;
  }
@media only screen and (max-width: 500px){
  .footer--sub, .footer--blocks{
    max-width: 100vw;
  }
}

.footer--root {
  padding-top: 5px;
  padding-bottom: 20px;
}
.footer--root * {
  font-size: 12px;
}
.footer--block[data-block-type=menu] {
	flex-basis: 100%;
}
.footer--block[data-block-type=subscribe]{
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer--form-container{
  display: flex;
  flex-flow: row;
}
.footer--menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media only screen and (min-width: 775px){
  .footer--menu{
    flex-flow: row;
  }
  .footer--menu li{
    margin: 0px !important;
  }
}

.footer--menu li:not(:first-child) {
	margin-left: 20px;
  white-space: nowrap;
}
.footer--root a, .footer--root a:link {
  text-decoration: none;
}
.footer--block[data-block-type=subscribe] {
  padding-top: 0;
}
.footer--root #mailing-list-module {
  position: relative;
}
.footer--subscribe--info {
  position: absolute;
    top: 11px;
    left: 17px;
    background: white;
    padding: 5px;
  pointer-events: none;
  z-index: -1;
}
.footer--block[data-block-type=subscribe]{
  display: flex;
  justify-content: center;
  align-items: center;
}
footer--form-container{
  display: flex;
  flex-flow: row;
}
.footer--subscribe .footer--form-container input[type=email]:not(:focus) {
  background: transparent;
}
.footer--subscribe ::-webkit-input-placeholder {
	color: transparent;
}
.footer--subscribe ::-moz-placeholder {
	color: transparent;
}
.footer--subscribe :-ms-input-placeholder {
	color: transparent;
}
.footer--subscribe :-moz-placeholder {
	color: transparent;
}
.footer--subscribe ::placeholder {
	color: transparent;
}
.footer--subscribe .feedback {
  position: absolute;
  top: 45px;
}
@media only screen and (max-width: 775px){
  .footer--sub--block[data-type=payment-icons]{
      justify-content: center !important;
  }
}
@media only screen and (min-width: 775px){
  .footer--sub--block[data-type=payment-icons]{
      justify-content: flex-end !important;
  }
}
/* blog */
.blog--root{
  padding-top: 32px!important;

}
.blog--body{
  padding: 0 0 72px;
}
.blog--header{
  padding-top:40px;
}
.blog--list{
    min-height: 75vh;
    padding-top: 45px;
    max-width: 100%!important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.blog--list--item{
  padding:0px!important;
  margin-top: -45px;
}

.blog--list--item:nth-child(n+4){
  margin-top: -36px;
}
@media only screen and (max-width: 640px) {
	.blog--list--item{
 	 	margin-top: -25px;
	}
  .blog--list--item:nth-child(n+4){
    margin-top: -25px;
  }
}

.blog--list--item--meta{
	position: absolute !important;
	padding: 20px !important;
}
.blog--list--item--meta h2 a{
	font-size: 14px;
}
.blog--list--item-readmore{
  display:none;
}

.article--root{
  padding-top: 10px;
}

.article--content, .layout--main-content article{
 	display: flex; 
  	flex-wrap: wrap;
	justify-content: space-around;

}
.article--content p, .layout--main-content article p{
	flex: 33.333%;
  	flex-grow: 1;
	padding: 5px!important;
 
}
@media only screen and (max-width: 640px) {
  	.article--content p, .layout--main-content article p{
		flex: 100%;
  		flex-grow: 1;
	}
}
.article--content .col2{
  flex: 50%!important;
}
.article--content .full{
  flex: 100%!important;
}

.layout--main-content article p:first-child{
	padding: 2rem;

}
.article--heading{
  max-width: unset !important;
  padding-bottom: 3px!important;
  align-items: unset;
  display: flex;
  padding-bottom: 0 !important;
  padding: 0 20px;
}
.article--image > .image--root{
  padding-top: 0 !important;
}
.article--image > .image--root > .image--container{
  padding-top: 0 !important;
}
@media only screen and (max-width:500px){
    .article--header--info{
    padding: 0!important;
  }
}
.article--header--info{
  padding-top: 16px;
  align-self: start;
}
.template--blog .image--root, .imagery-blog .image--root{
	width: 100%!important;
	padding: 10px 5px 5px 5px;
  
}
.article--content p img, .layout--main-content article p img{
  width: 100%;
  height: auto;
  object-position: top;
}

.imagery-blog .article--content{
  max-width: unset;
}

.blog--root {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 0 auto;
}
@media only screen and (min-width: 500px){
  .blog--root{
    padding-left: 15px;
    padding-right: 15px;
  }
}

.blog--root[data-section-id=framework--blog] {
    padding: 32px 0 0;
}

.blog--root[data-show-title=false][data-show-tag-filter=false] {
    padding-top: 0;
}

@media only screen and (min-width: 768px) {
    .blog--root[data-show-featured=true][data-section-id=framework--blog] {
        padding-top:0;
    }

    .blog--root[data-show-featured=false][data-section-id=framework--blog] {
        padding-top: 72px;
    }

    .blog--root[data-articles="0"][data-section-id=framework--blog] {
        padding-top: 32px;
    }
}

.blog--root>* {
    padding: 0 0 16px;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .blog--root>* {
        padding:0 0 32px;
    }
}

.blog--featured {
    -webkit-box-ordinal-group: 2;
    order: 1;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .blog--featured {
        padding-bottom:32px!important;
    }
}

@media only screen and (min-width: 768px) {
    .blog--featured {
        -webkit-box-ordinal-group:1;
        order: 0;
        padding-bottom: 72px;
    }
}

@media only screen and (min-width: 768px) {
    .blog--featured-container {
        position:relative;
    }

    .blog--root[data-image-height=small] .blog--featured-container {
        box-sizing: content-box;
        height: 400px;
    }

    .blog--root[data-image-height=small] .blog--featured-container .image--root,.blog--root[data-image-height=small] .blog--featured-container .placeholder--root {
        height: 100%;
    }

    .blog--root[data-image-height=small] .blog--featured-container .image--container,.blog--root[data-image-height=small] .blog--featured-container .placeholder--container {
        height: 100%;
        padding-top: 0!important;
    }

    .blog--root[data-image-height=small] .blog--featured-container img {
        height: 400px;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .blog--root[data-image-height=medium] .blog--featured-container {
        box-sizing: content-box;
        height: 640px;
    }

    .blog--root[data-image-height=medium] .blog--featured-container .image--root,.blog--root[data-image-height=medium] .blog--featured-container .placeholder--root {
        height: 100%;
    }

    .blog--root[data-image-height=medium] .blog--featured-container .image--container,.blog--root[data-image-height=medium] .blog--featured-container .placeholder--container {
        height: 100%;
        padding-top: 0!important;
    }

    .blog--root[data-image-height=medium] .blog--featured-container img {
        height: 640px;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

.blog--featured-header {
    display: none
}

@media only screen and (min-width: 768px) {
    .blog--featured-header {
        position:absolute;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        width: 100%;
        height: 100%;
        z-index: 1
    }

    .blog--featured-header h2 a {
        display: inline-block;
        max-width: 1000px;
        text-align: center;
        margin: 0;
        padding: 0 48px 32px
    }

    .blog--root[data-alt-color=true] .blog--featured-header h2 a {
        color: var(--color--alternative)
    }
}

.blog--featured-image {
    padding-bottom: 16px
}

@media only screen and (min-width: 768px) {
    .blog--featured-image {
        padding:0
    }

    .blog--root[data-image-height=small] .blog--featured-image,.blog--root[data-image-height=medium] .blog--featured-image {
        height: 100%
    }

    .blog--root[data-apply-overlay=true][data-image-height=small] .blog--featured-image .image--container:after {
        height: 400px
    }

    .blog--root[data-apply-overlay=true][data-image-height=medium] .blog--featured-image .image--container:after {
        height: 640px
    }

    .blog--root[data-apply-overlay=true] .blog--featured-image .image--container,.blog--root[data-apply-overlay=true] .blog--featured-image .image--parallax,.blog--root[data-apply-overlay=true] .blog--featured-image .placeholder--container {
        position: relative
    }

    .blog--root[data-apply-overlay=true] .blog--featured-image .image--container:after,.blog--root[data-apply-overlay=true] .blog--featured-image .image--parallax:after,.blog--root[data-apply-overlay=true] .blog--featured-image .placeholder--container:after {
        position: absolute;
        content: "";
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #0003;
    }

    .blog--root:not([data-image-height=large]) .blog--featured-image .image--parallax {
        padding-top: 0!important;
    }
}

.blog--featured-title--mobile {
    padding: 0 16px 12px;
}

@media only screen and (min-width: 768px) {
    .blog--featured-title--mobile {
        display:none;
    }
}

.blog--list--item-info {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

@media only screen and (min-width: 768px) {
    .blog--root[data-columns="1"] .blog--list--item-info {
        -webkit-box-orient:horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
    }
}

.blog--featured-info {
    padding: 0 16px 12px;
}

@media only screen and (min-width: 768px) {
    .blog--featured-info {
        display:none;
    }
}

.blog--featured-excerpt {
    padding: 0 16px 12px;
}

@media only screen and (min-width: 768px) {
    .blog--featured-excerpt {
        display:none;
    }
}

.blog--featured-excerpt:last-child {
    padding-bottom: 0;
}

.blog--featured-readmore {
    padding: 0 16px;
    text-decoration: underline;
}

@media only screen and (min-width: 768px) {
    .blog--featured-readmore {
        display:none
    }
}

.blog--dot {
    display: none
}

@media only screen and (min-width: 768px) {
    .blog--root[data-columns="1"] .blog--dot {
        display:inline-block;
        padding: 0 8px
    }
}

.blog--header--root {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    padding: 0
}

@media only screen and (min-width: 768px) {
    .blog--header--root {
        padding:0 48px 72px
    }
}

.blog--header {
    width: 100%;
    padding: 0 16px 32px
}

@media only screen and (min-width: 768px) {
    .blog--header {
        padding:0 32px;
        margin: 0 -32px;
        max-width: 864px
    }

    .blog--root[data-columns="2"] .blog--header,.blog--root[data-columns="3"] .blog--header {
        max-width: 1264px
    }
}

.blog--header>:only-child {
    padding-bottom: 0
}

.blog--title-container {
    text-align: center;
    padding-bottom: 32px
}

.blog--filter--root {
    width: 100%
}

.blog--filter--body {
    padding-bottom: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.blog--filter--body .disclosure--root {
    width: 100%;
    max-width: calc(100% - 64px)
}

@media only screen and (min-width: 768px) {
    .blog--filter--body .disclosure--root {
        display:none
    }
}

.blog--filter--menu {
    display: none
}

@media only screen and (min-width: 768px) {
    .blog--filter--menu {
        display:-webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        justify-content: center;
        margin: 0;
        padding: 0
    }
}

.blog--filter--menu-item {
    display: none;
    margin: 0;
    line-height: 1em
}

@media only screen and (min-width: 768px) {
    .blog--filter--menu-item {
        display:block
    }

    .blog--filter--menu-item a {
        display: inline-block;
        padding: 8px
    }
}

.blog--body {
    -webkit-box-ordinal-group: 3;
    order: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding-bottom: 32px
}

@media only screen and (min-width: 768px) {
    .blog--body {
        -webkit-box-ordinal-group:1;
        order: 0;
        padding: 0 48px 72px
    }
}

.blog--list {
    width: 100%;
    padding-bottom: 0
}

@media only screen and (max-width: 767px) {
    .blog--list {
        padding:0 16px
    }
}

@media only screen and (min-width: 768px) {
    .blog--list {
        margin:-32px;
        max-width: 864px
    }

    .blog--root[data-columns="2"] .blog--list,.blog--root[data-columns="3"] .blog--list {
        max-width: 1264px
    }
}

.blog--list>:not(:last-child) {
    padding-bottom: 32px
}

@media only screen and (min-width: 768px) {
    .blog--list>:not(:last-child) {
        padding-bottom:32px
    }
}

.blog--list--item {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

@media only screen and (min-width: 768px) {
    .blog--list--item {
        padding:32px
    }

    .blog--root[data-columns="2"] .blog--list--item {
        width: 50%
    }

    .blog--root[data-columns="3"] .blog--list--item {
        width: 33.33333%
    }
}

.blog--list--item>:not(:last-child) {
    padding-bottom: 12px
}

@media only screen and (min-width: 768px) {
    .blog--list--item>:not(:last-child) {
        padding-bottom:16px
    }
}
@media only screen and (min-width: 768px) {
    .blog--list--image-link {
        padding-bottom:32px!important
    }
}

@media only screen and (max-width: 767px) {
    .blog--list--item-image {
        margin:0 -16px
    }
}

.blog--footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    padding: 32px 16px 0
}

@media only screen and (min-width: 768px) {
    .blog--footer {
        -webkit-box-orient:horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding: 72px 32px 0;
        margin: 0 -32px;
        max-width: 864px
    }

    .blog--root[data-columns="2"] .blog--footer,.blog--root[data-columns="3"] .blog--footer {
        max-width: 1264px
    }
}

.blog--footer>:not(:first-child) {
    padding-bottom: 32px
}

@media only screen and (min-width: 768px) {
    .blog--footer>:not(:first-child) {
        padding:0
    }
}

.blog--footer-rss {
    -webkit-box-ordinal-group: 2;
    order: 1
}

@media only screen and (min-width: 768px) {
    .blog--footer-rss {
        -webkit-box-ordinal-group:1;
        order: 0
    }

    .blog--footer-rss:only-child {
        width: 100%;
        text-align: center
    }

    .blog--footer-rss:only-child a {
        padding-left: 16px
    }
}

.blog--footer-rss a {
    text-decoration: underline;
    padding: 12px
}

@media only screen and (min-width: 768px) {
    .blog--footer-rss a {
        padding:16px 16px 16px 0
    }
}

.blog--footer-pagination:only-child {
    width: 100%
}

@media only screen and (max-width: 767px) {
    .blog--footer-pagination {
        padding-bottom:32px
    }
}

.blog--no-articles {
    padding: 72px 48px;
    margin: 0;
    max-width: 700px
}

.blog--no-articles p {
    text-align: center
}
.contact-page--wrapper {
    margin: 0 auto;
    padding: 32px 20px;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
}
.contact-page--header {
    text-align: left;
    flex-basis: 100%;
    padding-bottom: 20px;
}
.contact-page--form-title{
    margin:0;
    font-family: var(--font--accent--family);
    font-weight: var(--font--accent--weight);
    font-style: var(--font--accent--style);
    text-transform: uppercase;
    font-size: var(--font--accent--size);
    letter-spacing: 1px;
    padding-bottom: 16px;
}
.contact-page--form input[type=submit]{
  width:100%;
}
[data-item=a11y-button], [data-item=button]>*, input[type=submit] {
    background: var(--bg-color--button);
    color: var(--color--button);
    border-radius: 2px;
    font-family: var(--font--accent--family);
    font-weight: var(--font--accent--weight);
    font-style: var(--font--accent--style);
    text-transform: uppercase;
    font-size: var(--font--accent--size);
    letter-spacing: 1px;
    font-size: 14px;
}
.contact-form > p > textarea{
  height:100px;
}
.contact--message{
      min-width: 100%;
      min-height: 100px;
}
@media only screen and (min-width: 768px) {
    .contact-page--left-column {
        padding: 20px 32px 0 0;
        width: 50%;
    }
    .contact-page--right-column{
      padding: 20px;
      width: 50%;
    }
}
.rte, [data-item=paragraph], [data-item=rte-content], body {
    font-family: var(--font--paragraph--family);
    font-weight: var(--font--paragraph--weight);
    font-style: var(--font--paragraph--style);
    font-size: var(--font--paragraph--size);
    line-height: 1.5em;
    margin: -.25em 0;
}
.rte>:not(:last-child), [data-item=rte-content]>:not(:last-child) {
    padding-bottom: 16px;
}

@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left][data-show-featured=true] .article--heading {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
    }
}
@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left][data-show-featured=true] .article--heading {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
    }
}
@media only screen and (min-width: 768px) {
    .article--root>:first-child {
        padding: 0 0 72px;
    }
}
.article--root>:first-child {
    padding: 0 0 16px;
}
.article--root {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 0 auto;
    padding: 32px 0;
}
.article--heading>* {
    width: 100%;
}
.article--heading {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    max-width: 1200px;
}

@media only screen and (min-width: 768px) {
    .article--root>* {
        padding: 0 0 32px;
    }
}
.article--root>* {
    width: 100%;
    padding: 0 20px;
}
@media only screen and (min-width: 768px) {
    .article--root[data-show-author=false][data-show-date=false] .article--title {
        padding-bottom: 0;
    }
}
@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left] .article--title {
        text-align: left;
    }
}
@media only screen and (min-width: 768px) {
    .article--header--info>:not(:last-child) {
        padding-bottom: 16px;
    }
}
.article--title {
    text-align: center;
}
[data-item=section-heading], h1, h2 {
    font-family: var(--font--heading--family);
    font-weight: var(--font--heading--weight);
    font-style: var(--font--heading--style);
    text-transform: var(--font--heading--uppercase);
    font-size: var(--font--section-heading--size);
    line-height: 1.25em;
    margin: -.25em 0;
    letter-spacing: .025em;
}
@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left][data-show-featured=true] .article--heading>:not(.article--info) {
        width: 50%;
    }
}
@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left][data-show-featured=true] .article--header--info {
        padding: 32px 32px 0 48px;
    }
}
@media only screen and (min-width: 768px) {
    .article--content {
        padding-bottom: 72px;
    }
}
/* BLOG */
@media only screen and (min-width: 768px) {
    .blog--root[data-show-featured=false][data-section-id=framework--blog] {
        padding-top: 72px;
    }
}
.blog--root[data-show-title=false][data-show-tag-filter=false] {
    padding-top: 0;
}
.blog--root[data-section-id=framework--blog] {
    padding: 32px 0 0;
}
@media only screen and (min-width: 768px) {
    .blog--body {
        -webkit-box-ordinal-group: 1;
        order: 0;
        padding: 0 48px 72px;
    }
}
@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left][data-show-featured=true] .article--heading>:not(.article--info) {
        width: 50%;
    }
}
.article--root[data-show-author=false][data-show-date=false] .article--image {
    padding-bottom: 0;
}
.article--image {
    padding-bottom: 16px;
    -webkit-box-ordinal-group: 2;
    order: 1;
    -webkit-box-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: flex;
}
@media only screen and (max-width: 500px){
  .article--image > .image--root > .image--container{
padding: 0!important;
    display: block;
    max-width: 100vw;
  }
  .article--image{
    padding: 15px 5px !important;
  }
    .article--image > .image--root{
      padding: 0 !important;
    }
  .article--heading{
    max-width: 100vw !important;
    padding: 0 20px !important;
    padding-bottom: 12px !important;
  }
  .article--root{
    padding-top: 15px !important;
  }
  .article--root>*{
    padding: 0 20px !important;
  }
  .article--content > p.full, .article--content > p.col2{
    padding: 5px !important;
  }
}
@media only screen and (min-width: 500px){
  .article--heading{
    padding: 20px;
  }
}
.blog--body {
    -webkit-box-ordinal-group: 3;
    order: 2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding-bottom: 32px;
}
@media only screen and (min-width: 768px) {
    .blog--root>* {
        padding: 0 0 32px;
    }
}
.blog--root>* {
    padding: 0 0 16px;
    width: 100%;
}
@media only screen and (min-width: 768px) {
    .blog--root[data-columns="2"] .blog--list, .blog--root[data-columns="3"] .blog--list {
        max-width: 1264px;
    }
}
@media only screen and (min-width: 768px) {
    .blog--list {
        margin: -32px;
        max-width: 864px;
    }
}
.blog--list {
    width: 100%;
    padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
    .blog--root[data-columns="3"] .blog--list--item {
        width: 33.33333%;
    }
}
@media only screen and (min-width: 768px) {
    .blog--list>:not(:last-child) {
        padding-bottom: 32px;
    }
}
.blog--list>:not(:last-child) {
    padding-bottom: 32px;
}
@media only screen and (min-width: 768px) {
    .blog--list--item {
        padding: 32px;
    }
}
.blog--list--item {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}
@media only screen and (min-width: 768px) {
    .blog--list--item>:not(:last-child) {
        padding-bottom: 16px;
    }
}
.blog--list--item>:not(:last-child) {
    padding-bottom: 12px;
}
body[data-tabbing=false] [tabindex="0"], body[data-tabbing=false] a, body[data-tabbing=false] button, body[data-tabbing=false] input, body[data-tabbing=false] textarea {
    outline: 0;
}
/* checked */
@media only screen and (min-width: 768px) {
    .blog--list--image-link {
        padding-bottom: 32px !important;
    }
}
a, a:link, a:visited {
    color: var(--color--body);
    text-decoration: none;
    background-color: transparent;
}
.template--blog .image--root, .imagery-blog .image--root {
    width: 100% !important;
}
.image--root {
    position: relative;
    max-width: 100%;
}
.image--container {
    max-width: 100%;
    position: relative;
}
.image--root img.lazyloaded {
    visibility: visible;
    opacity: 1;
}

.blog--list--item-image > .image--root img {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    width: 100%;
}
img {
    vertical-align: middle;
    max-width: 100%;
    border-style: none;
}
@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left][data-show-featured=true] .article--heading {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        display: flex;
    }
}
@media only screen and (min-width: 768px) {
    .article--root>:first-child {
        padding: 0 0 72px;
    }
}
.article--root>:first-child {
    padding: 0 20px;
}
@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left][data-show-featured=true] .article--heading>:not(.article--info) {
        width: 50%;
    }
}
@media only screen and (min-width: 768px) {
    .article--root[data-title-position=left][data-show-featured=true] .article--header--info {
        padding: 32px 32px 0 48px;
    }
}
@media only screen and (min-width: 768px) {
    .article--header--info {
        padding: 0 32px 0 0 !important;
    }
}
.article--header--info {
    -webkit-box-ordinal-group: 2;
    order: 1;
    margin: 0 auto;
}
```css
```css
/* ===========================================================
   IMAGE WRAPPER
=========================================================== */

.product--image-wrapper {
  position: relative;
}


/* ===========================================================
   QUICK SHOP TRIGGER
=========================================================== */

.quick-shop-trigger {
  position: absolute;

  top: 10px;
  right: 10px;

  background: transparent;

  padding: 10px;

  min-width: 45px;
  min-height: 45px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  cursor: pointer;

  pointer-events: auto;

  z-index: 3;

  transition:
    transform .15s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.quick-shop-trigger:hover {
  transform: scale(1.08);

  border-color: #111;

  box-shadow:
    0 0 10px rgba(0,0,0,0.25);
}


/* ===========================================================
   QUICK SHOP ICONS
=========================================================== */

.quick-cart-icon,
.quick-cart-close {
  width: 24px;
  height: 24px;

  color: #6c6c6c;
}


.quick-cart-close {
  display: none;
}


.quick-shop-trigger.is-open .quick-cart-icon {
  display: none;
}


.quick-shop-trigger.is-open .quick-cart-close {
  display: block;
}


/* ===========================================================
   QUICK SHOP OVERLAY — DESKTOP
=========================================================== */

.quick-shop-overlay {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  transition:
    opacity .25s ease;

  pointer-events: none;

  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;
}


.quick-shop-overlay.active {
  opacity: 1;

  pointer-events: auto;
}


/* ===========================================================
   OVERLAY BACKGROUND
=========================================================== */

.quick-shop-overlay::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    rgba(255, 255, 255, 0.6);

  z-index: 1;

  pointer-events: none;
}


/* ===========================================================
   QUICK SHOP CONTENT — DESKTOP
=========================================================== */

.quick-shop-content {
  position: relative;

  z-index: 2;

  pointer-events: auto;

  background: #fff;

  border-radius: 12px;

  padding: 20px;

  box-shadow:
    0 5px 15px rgba(0,0,0,0.25);

  max-width: 400px;

  width: 90%;

  box-sizing: border-box;
}


/* ===========================================================
   CLOSE BUTTON
=========================================================== */

.quick-shop-close {
  position: absolute;

  top: 10px;
  right: 10px;

  width: 40px;
  height: 40px;

  padding: 5px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: transparent;

  border: 0;

  color: #6c6c6c;

  cursor: pointer;

  z-index: 5;

  transition:
    color .2s ease,
    transform .15s ease;
}


.quick-shop-close:hover {
  color: #111;

  transform: scale(1.05);
}


/* ===========================================================
   ADD TO CART
=========================================================== */

.quick-shop-add, .product-buy-buttons--primary {
  background:
    var(--button--bg-color) !important;

  color:
    var(--button--color) !important;

  border:
    2px solid var(--button--bg-color);

  border-radius:
    var(--button--radius);

  padding:
    14px 22px;

  width: 100%;

  text-align: center;

  font-family:
    var(--font--nav--family);

  font-weight:
    var(--font--nav--weight);

  text-transform:
    var(--font--nav--uppercase);

  letter-spacing:
    var(--font--button--spacing);

  font-size: 15px;

  cursor: pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .15s ease;
}


.quick-shop-add:hover, .product-buy-buttons--primary:hover {
  background:
    var(--button--bg-color-hover, #000) !important;

  border-color:
    var(--button--bg-color-hover, #000);

  transform:
    scale(1.03);
}


/* ===========================================================
   SIZE SWATCHES
=========================================================== */

.quick-shop-sizes {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 15px;
}


.quick-shop-size-option {
  padding:
    8px 12px;

  border:
    2px solid #000;

  border-radius:
    6px;

  background:
    #fff;

  color:
    #000 !important;

  font-size:
    14px;

  cursor:
    pointer;

  transition:
    all .2s ease;

  min-width:
    40px;

  text-align:
    center;
}


.quick-shop-size-option:hover {
  background:
    #000;

  color:
    #fff !important;
}


.quick-shop-size-option.selected {
  background:
    #000;

  color:
    #fff !important;

  border-color:
    #000;
}


/* ===========================================================
   MOBILE
=========================================================== */

@media (max-width: 768px) {


  /* ---------------------------------------------------------
     TRIGGER
  --------------------------------------------------------- */

  .quick-shop-trigger {
    top: auto;

    right: 10px;

    bottom: 10px;

    padding: 8px;

    min-width: 40px;
    min-height: 40px;

    z-index: 3;
  }


  .quick-shop-trigger.is-open {
    display: none;

    visibility: hidden;
  }


  /* ---------------------------------------------------------
     ICONS
  --------------------------------------------------------- */

  .quick-cart-icon,
  .quick-cart-close {
    width: 18px;
    height: 18px;
  }


  /* ---------------------------------------------------------
     MOBILE OVERLAY
     
     Deze wordt door JavaScript naar <body> verplaatst.
  --------------------------------------------------------- */

  .quick-shop-overlay {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    height: 100dvh !important;

    margin: 0 !important;

    padding: 0 !important;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 2147483647 !important;

    transition:
      opacity .25s ease,
      visibility 0s linear .25s;
  }


  /* ---------------------------------------------------------
     MOBILE OVERLAY ACTIVE
  --------------------------------------------------------- */

  .quick-shop-overlay.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
      opacity .25s ease,
      visibility 0s linear 0s;
  }


  /* ---------------------------------------------------------
     MOBILE BACKDROP
  --------------------------------------------------------- */

  .quick-shop-overlay::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
      rgba(255, 255, 255, 0.60);

    z-index: 1;

    pointer-events: none;
  }


  /* ---------------------------------------------------------
     MOBILE CONTENT / BOTTOM SHEET
  --------------------------------------------------------- */

  .quick-shop-content {
    position: relative;

    z-index: 2;

    width: 100% !important;

    max-width: none !important;

    box-sizing: border-box;

    background: #fff;

    border-radius:
      12px 12px 0 0;

    padding: 20px;

    padding-bottom:
      calc(
        20px +
        env(safe-area-inset-bottom)
      );

    box-shadow:
      0 -10px 30px rgba(0,0,0,0.20);

    font-size: 14px;

    line-height: 1.25em;

    max-height: 75vh;

    overflow-y: auto;

    flex-shrink: 0;
  }


  /* ---------------------------------------------------------
     MOBILE CLOSE
  --------------------------------------------------------- */

  .quick-shop-close {
    position: absolute;

    top: 10px;

    right: 10px;

    width: 40px;

    height: 40px;

    padding: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: 0;

    color: #6c6c6c;

    cursor: pointer;

    z-index: 5;
  }


  /* ---------------------------------------------------------
     MOBILE TITLE
  --------------------------------------------------------- */

  .quick-shop-content h3,
  .quick-shop-content h4,
  .quick-shop-content .product-title,  h1.product-page--heading{

    font-size: 14px;

    line-height: 1.3;

    margin-top: 0;

    margin-bottom: 10px;

    padding-right: 40px;
  }

h1.product-page--heading{
  padding-right: 0 !important;
}
  /* ---------------------------------------------------------
     MOBILE SIZE SWATCHES
  --------------------------------------------------------- */

  .quick-shop-sizes {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 15px;
  }


  .quick-shop-size-option {

    padding:
      6px 10px;

    font-size:
      13px;

    min-width:
      40px;
    min-height:
      40px;
  }


  /* ---------------------------------------------------------
     MOBILE ADD TO CART
  --------------------------------------------------------- */

  .quick-shop-add {

    padding:
      10px 14px;
    border-width:
      2px;

    margin-top:
      10px;

              font-size: 15px;
        letter-spacing: var(--font--button--spacing);
        text-transform:uppercase;
  }


  /* ---------------------------------------------------------
     ACHTERGROND PAGINA BLOKKEREN
  --------------------------------------------------------- */

  body.quick-shop-open {
    overflow: hidden;
  }
}

/* =========================================================
   MEGA MENU — HOVER REVEAL (v9 BOTTOM OVERLAY & ORIGINAL CASING)
   Full-width + stable hover + bottom image overlay text
   ========================================================= */
@media (min-width: 1024px) {

  /* ---------------------------------------------------------
     1. PREVENT HEADER OVERFLOW CLIPPING
     --------------------------------------------------------- */
  header,
  .header,
  .header-wrapper,
  .header--root,
  .header--container,
  x-menu-root,
  .x-menu-root,
  .x-menu {
    overflow: visible !important;
  }

  /* ---------------------------------------------------------
     2. POSITIONING CONTEXT FOR FULL WIDTH
     --------------------------------------------------------- */
  .header--container {
    position: relative !important; 
  }

  .x-menu--level-1--link {
    position: static !important;
  }

  .menu-block--image-wrapper > a{
    padding: 0 !important;
  }

  /* ---------------------------------------------------------
     3. LEVEL 2 PANEL — HEIGHT & FULL WIDTH CONTROL
     --------------------------------------------------------- */
  .x-menu--level-1--link > .x-menu--level-2--container {
    display: block !important;
    position: absolute !important;

    top: 100% !important;
    left: 0 !important;

    width: 100% !important;
    height: 300px !important; /* ADJUST TOTAL MENU HEIGHT HERE */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 99999 !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* ---------------------------------------------------------
     4. HOVER BRIDGE
     --------------------------------------------------------- */
  .x-menu--level-2--container::before {
    content: "" !important;
    position: absolute !important;
    top: -30px !important;
    left: 0 !important;
    width: 100% !important;
    height: 35px !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  /* ---------------------------------------------------------
     5. REVEAL
     --------------------------------------------------------- */
  .x-menu--level-1--link:hover > .x-menu--level-2--container,
  .x-menu--level-1--link:focus-within > .x-menu--level-2--container,
  .x-menu--level-1--link[aria-expanded="true"] > .x-menu--level-2--container,
  .x-menu--level-2--container[aria-hidden="false"],
  .x-menu--level-2--container:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* ---------------------------------------------------------
     6. LAYOUT
     --------------------------------------------------------- */
  .x-menu--mega-layout {
    display: flex !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--bg-color--body, #fff);

  }
  .x-menu--level-2--container{
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }

  .x-menu--mega-left {
    width: 55%;
    height: 100%;
    padding: 30px 40px;
    box-sizing: border-box;
    overflow: hidden;
    display:flex;
    flex-flow: row;

    column-width: 160px;
    column-gap: 35px;
    column-fill: auto;
  }

  .x-menu--mega-column {
    break-inside: avoid;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
  }

  .x-menu--level-2--link,
  .x-menu--level-3--link {
    display: block;
    margin-bottom: 6px;
  }

  /* ---------------------------------------------------------
     7. DYNAMIC RIGHT PANEL & BOTTOM OVERLAY DESCRIPTION
     --------------------------------------------------------- */
  .x-menu--mega-right {
    width: 45%;
    height: 100% !important;
    padding: 15px 40px 15px 0;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    gap: 15px !important;
  }
.x-menu--mega-right[data-count="1"]{
  direction:rtl;
}


  .x-menu--mega-right > *:only-child {
    grid-column: span 2;
  }

  /* Anchor positioning context for the overlay */
  .x-menu--mega-right > *,
  .x-menu--mega-right .menu-block,
  .x-menu--mega-right [class*="menu-block"]:not([class*="description"]) {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }

  /* Image wrapper fills 100% container height */
  .x-menu--mega-right a,
  .x-menu--mega-right figure,
  .x-menu--mega-right picture,
  .x-menu--mega-right .menu-block--image-wrapper {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .menu-block--image-wrapper a{
    transition:0.8s;
  }

  .menu-block--image-wrapper a:hover{
    opacity:0.6;
  }
  .x-menu--mega-right img,
  .x-menu--mega-right svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Overlay Description Text at Bottom of Image */
  .x-menu--mega-right .menu-block--description,
  .x-menu--mega-right [class*="description"] {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;

    padding: 16px !important;
    color: #ffffff !important;
    text-transform: none !important; /* Prevents force to uppercase */
    pointer-events: none !important; /* Prevents text from blocking link clicks */
    box-sizing: border-box !important;
  }

  /* Force all nested text nodes inside description to keep original casing and white color */
  .x-menu--mega-right .menu-block--description *,
  .x-menu--mega-right [class*="description"] * {
    color: #ffffff !important;
    text-transform: none !important;
  }

  .menu-block--description{
    height: 50px !important;
    padding: 0 !important;
  }
}

.stacked-text--title {
  position: relative;
  display: inline-block;
}

/* =========================================================
   Y-MENU DRILL-DOWN OVERLAY FIX
   ========================================================= */

/* Parent Menu Container Context */
y-menu-root,
.y-menu {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* CRITICAL: Prevents <li> items from containing submenus locally */
.y-menu li {
  position: static !important;
}

/* Level 1 Base List Padding */
.y-menu--level-1--container {
  list-style: none;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Submenu Containers (Level 2 & Level 3) Overlay Panels */
.y-menu--level-2--container,
.y-menu--level-3--container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  
  /* Background hides underlying level */
  background-color: var(--bg-color--body, #ffffff) !important;
  
  list-style: none;
  margin: 0;
  box-sizing: border-box;

  /* Off-screen by default */
  transform: translateX(100%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform 0.25s ease-in-out, visibility 0.25s ease-in-out !important;
}

/* Depth padding customization */
.icon--root.icon--chevron-left--small{
  margin-right: 10px;
}

.icon--root.icon--chevron-right--small{
  margin-left: 10px;
}

.y-menu--level-1--link, .y-menu--level-2--link, .y-menu--level-3--link, .y-menu--parent-link, .y-menu--back-link{
  padding: 24px var(--spacing--item);
  border-bottom: 1px solid  var(--bdr-dark--general);
}
.y-menu--level-1--link a, .y-menu--level-2--link a, .y-menu--level-3--link a{
  display: flex;
  width: 100%;
    justify-content: space-between;
    align-items: center;
    line-height: 1.3;
}

.y-menu--level-2--container {
  z-index: 10 !important;
}

.y-menu--level-3--container {
  z-index: 20 !important;
}

/* Active State — Reveals active level panel */
.y-menu--level-2--container[aria-hidden="false"],
.y-menu--level-2--container.is-active,
.y-menu--level-3--container[aria-hidden="false"],
.y-menu--level-3--container.is-active {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.y-menu--blocks{
  display: none;
}

@media (max-width:640px){
  .stacked-text--title.home::after{
    top:50%;
    width:18px;
    height:18px;
  }
}

.stacked-text--root.home{
 justify-content: center;
}

.stacked-text--title.home::after {
  content: "";
  position: absolute;
  left: calc(100% + 10px);
  top: 53%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);

  background: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5 9.5 8 5 12.5' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;

  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5 9.5 8 5 12.5' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;

  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.stacked-text--title-home:hover::after {
  opacity: 0.9;
  transform: translate(3px, -50%);
}
/* =========================================================
   MINIMAL FOOTER
   ========================================================= */

.footer--root {
  width: 100%;
  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   MAIN
   --------------------------------------------------------- */

.footer--main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}


/* ---------------------------------------------------------
   NEWSLETTER
   --------------------------------------------------------- */

.footer--newsletter {
  width: 100%;
  padding: clamp(32px, 5vw, 72px);
}

.footer--subscribe {
  max-width: 620px;
}

.footer--heading {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 1.05;
  font-weight: 500;
}

.footer--newsletter-info {
  max-width: 520px;
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.5;
}

.footer--newsletter-info p {
  margin: 0;
}


/* ---------------------------------------------------------
   NEWSLETTER FORM
   --------------------------------------------------------- */

.footer--newsletter-form {
  width: 100%;
  max-width: 560px;
}

.footer--newsletter-input {
  width: 100%;
  margin-bottom: 18px;
  border-bottom: 1px solid currentColor;
}

.footer--newsletter-input input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.footer--newsletter-input input::placeholder {
  color: inherit;
  opacity: 0.55;
}


/* Checkbox */

.footer--newsletter-consent {
  margin-bottom: 20px;
}

.footer--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  cursor: pointer;

  font-size: 12px;
  line-height: 1.45;
}

.footer--checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.footer--checkbox-mark {
  position: relative;

  flex: 0 0 16px;
  width: 16px;
  height: 16px;

  margin-top: 1px;

  border: 1px solid currentColor;
}

.footer--checkbox input:checked + .footer--checkbox-mark::after {
  content: "";

  position: absolute;

  left: 4px;
  top: 1px;

  width: 5px;
  height: 9px;

  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;

  transform: rotate(45deg);
}

.footer--checkbox input:focus-visible + .footer--checkbox-mark {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.footer--checkbox-text {
  opacity: 0.8;
}

.footer--checkbox-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer--checkbox-text a:hover {
  opacity: 0.6;
}


/* Subscribe button */

.footer--newsletter-submit {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 52px;

  padding: 12px 24px;

  border: 1px solid #000;
  background: #fff;
  color: #000 !important;

  font: inherit;
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.footer--newsletter-submit:hover {
  opacity: 0.8;
}

.footer--newsletter-submit:active {
  transform: translateY(1px);
}

.footer--newsletter-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* Feedback */

.footer--form-success {
  margin-top: 14px;

  font-size: 13px;
  line-height: 1.4;
}

.footer--form-error {
  margin-bottom: 16px;

  font-size: 13px;
  line-height: 1.4;
}

.footer--recaptcha {
  margin-top: 12px;

  font-size: 10px;
  line-height: 1.4;

  opacity: 0.5;
}


/* ---------------------------------------------------------
   MENUS
   --------------------------------------------------------- */

.footer--menus {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(120px, 1fr)
  );
  gap: clamp(24px, 4vw, 64px);

  width: 100%;
  padding: clamp(32px, 5vw, 72px);
}

.footer--menu-column {
  min-width: 0;
}

.footer--menu-heading{
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer--menu {
  display: flex;
  flex-direction: column;
  gap: 9px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.footer--menu a, li.x-menu--level-3--link a, li.x-menu--level-2--link a{
  display: inline-block;
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-transform: none !important;
  font-family: var(--font--paragraph--family);
  font-weight: var(--font--paragraph--weight);
  font-style: var(--font--paragraph--style);
  letter-spacing: 0px;
}

.footer--menu > li > a:hover, li.x-menu--level-3--link > a:hover, li.x-menu--level-2--link a:hover{
  opacity: 0.55;
  text-decoration: underline;
}


/* ---------------------------------------------------------
   BOTTOM / COPYRIGHT
   --------------------------------------------------------- */

.footer--bottom {
  width: 100%;
}

.footer--bottom-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;

  width: 100%;
  padding: 20px clamp(20px, 5vw, 72px);
}

.footer--copyright {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  min-width: 0;
}

.footer--about {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer--about-text {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.7;
}

.footer--about-text p {
  margin: 0;
}

.footer--about-logo img {
  display: block;
  width: auto;
  max-width: 100px;
  height: auto;
}

.footer--social-icons {
  display: flex;
  align-items: center;
}

.footer--utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.footer--localization {
  font-size: 12px;
}

.footer--payment-icons {
  display: flex;
  align-items: center;
}


/* ---------------------------------------------------------
   HIDDEN ACCESSIBILITY ELEMENT
   --------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

  .footer--main {
    grid-template-columns: 1fr 1fr;
  }

  .footer--newsletter,
  .footer--menus {
    padding: 40px;
  }

  .footer--menus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer--bottom-content {
    padding: 20px 40px;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 640px) {

  .footer--main {
    display: block;
  }

  .footer--newsletter {
    padding: 36px 20px;
    border-right: 0;
  }

  .footer--heading {
    font-size: 28px;
  }

  .footer--newsletter-info {
    margin-bottom: 24px;
  }

  .footer--newsletter-input {
    width: 100%;
  }

  .footer--menus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;

    padding: 36px 20px;
  }

  .footer--menu-heading {
    margin-bottom: 14px;
  }

  .footer--menu {
    gap: 0px !important;
  }

  .footer--menu a {
    font-size: 14px;
  }

  .footer--bottom-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 20px;
    gap: 20px;
  }

  .footer--utilities {
    justify-content: flex-start;
    width: 100%;
  }

}


/* ---------------------------------------------------------
   VERY SMALL SCREENS
   --------------------------------------------------------- */

@media screen and (max-width: 400px) {

  .footer--menus {
    grid-template-columns: 1fr;
  }

}