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

body {
  font-family: "Helvetica Neue";
}

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

h2 {
  font-size: 3em;
  padding-bottom: 28px;
  margin-bottom: 0;

}



html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;


  /* nodig voor het omkeer effect van de elementen in de header */
  /* bron sanne */
  background-color: #fff;
  ;
}



section {
  width: 100%;
}

section:first-of-type {
  position: relative;
  overflow: hidden;
  color: var(--AchtergrondLicht);
}

/* Zorgt ervoor dat de afbeelding zich als een layout-blok gedraagt
   (voorkomt witte ruimte onder de afbeelding door inline gedrag) */
section:first-of-type img {
  width: 100%;
  display: block;
}


section:first-of-type p,
section:first-of-type h2,
section:first-of-type a {
  position: absolute;
  left: 1rem;
}

section:first-of-type p {
  bottom: 7rem;
}

section:first-of-type h2 {
  bottom: 3rem;
  margin: 0;
  font-size: 40px;
}

section:first-of-type a {
  bottom: 2rem;
  background: var(--AchtergrondLicht);
  color:  var(--Kleurtekst);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 2px;
  font-family: Helvetica Neue condensed;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.1em;

}

section:first-of-type a:nth-of-type(2) {
  white-space: nowrap;
  font-size: 12px;
  display: block;

  position: absolute;
  bottom: 0rem;

  animation: ticker 14s linear infinite;
  background: none;
  padding: 0;
  color: grey;

}

section:first-of-type>a:nth-of-type(2)::after {
  content: " Free Shipping on EU Orders above €250  Free Shipping on EU Orders above €250 ";
  padding-left: 2rem;
}

section:nth-of-type(2) {
  padding-left: 16px;
  padding-right: 16px;
  position: relative;

}

section:nth-of-type(2) img {
  width: 100%;
  display: block;
}

section:nth-of-type(2) a {
  position: absolute;
  left: 24px;
  bottom: 10px;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  background-color: rgba(158, 156, 152, 0.75);
  padding: 14px 20px;
  font-size: 0.75em;
  font-family: Helvetica Neue condensed;
  border-radius: 2px;
  letter-spacing: 0.1em;
}


section:nth-of-type(3) {
  padding-left: 16px;
  padding-right: 16px;
}

section:nth-of-type(3) article {
  position: relative;
  min-width: 0;

}

section:nth-of-type(3) article>a:first-of-type {
  all: unset;
}


section:nth-of-type(3) ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 32px;
  min-width: 0;

}

section:nth-last-of-type(3) li {
  min-width: 0;

}

section:nth-of-type(3) ul img {
  width: 100%;
  display: block;
  border-radius: 2px;
}

section:nth-of-type(3) p {
  font-size: 12px;
  margin: 0;
  padding-top: 4px;
}

section:nth-of-type(3) article p:nth-of-type(2) {
  opacity: 0.5;
}

section:nth-of-type(3) h3 {
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 4px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  display: block;
  min-width: 0;
}

section:nth-of-type(3) button {
  position: absolute;
  bottom: 82px;
  right: 5px;
  ;
  background-color: var(--AchtergrondLicht);
  border: none;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  font-size: 16px;

}

section:nth-of-type(3) a {

  display: block;

  margin-top: 24px;
  padding: 16px 0;

  background: var(--AchtergrondDonker);
  color: white;

  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;

  text-decoration: none;
  border-radius: 2px;

  font-family: Helvetica Neue condensed;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.1em;
}

section:nth-of-type(4) {
  padding-left: 16px;
  padding-right: 16px;
}

section:nth-of-type(4) article {
  position: relative;
}

section:nth-of-type(4) button {
  position: absolute;
  bottom: 88px;
  right: 5px;
  ;
  background-color: var(--AchtergrondLicht);
  border: none;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  font-size: 16px;
}

section:nth-of-type(4) ul {
  display: flex;
  gap: 16px;

  list-style: none;
  margin: 0;
  padding: 0;

  overflow-x: auto;
  scroll-snap-type: x mandatory;

}

section:nth-of-type(4) li {
  flex: 0 0 80%;
  /* bron: chatgpt */
  scroll-snap-align: start;
}

section:nth-of-type(4) ul li img {
  width: 100%;
  height: auto;
  display: block;

  width: 100%;
  height: 100%;
  object-fit: contain;
}

section:nth-of-type(4)>a:last-of-type {

  display: block;

  margin-top: 24px;
  padding: 16px 0;

  background:   var(--AchtergrondDonker);
  color:  var(--KleurtekstLicht);

  text-align: center;
  text-transform: uppercase;
  font-size: 12px;

  text-decoration: none;
  border-radius: 2px;

  font-family: Helvetica Neue condensed;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.1em;

}

section:nth-of-type(4) a {
  text-decoration: none;
  color: var(--Kleurtekst);

}

section:nth-of-type(4) p {
  font-size: 12px;
  margin: 0;
  padding: 0;
  padding-top: 6px;
}

section:nth-of-type(4) article p:nth-of-type(2) {
  opacity: 0.75;
}

section:nth-of-type(4) h3 {
  font-size: 12px;
  margin: 0;
  padding-top: 2px;

}



section:nth-of-type(4)>a:last-of-type:hover {
  opacity: 0.85;
}


@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


@keyframes rotate3D {
  0% {
    transform:
      rotateY(0deg) translateZ(calc(var(--blokje-size) * 1.3));
  }

  100% {
    transform:
      rotateY(-360deg) translateZ(calc(var(--blokje-size) * 1.3));
  }
}


/* bron: chatgpt */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}