/**************/
/* CSS REMEDY */
/**************/
*{
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;;
}
:root{
  --base-font-size: 16px;
}

body{
  font-size: var(--base-font-size);
}

body {
  background: var(--bg);
  color: var(--clr);
  transition: 0.3s;
}

:root {
  /* colors */
  --color-header-background: white;
  --color-footer-background: #FE467C;
  --color-nav-background: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-header-background: grey;
    --color-footer-background: black;
    --color-main-backround:black;
    --color-text-backround: white;
    --color-nav-background: grey;
  }
}

header {
  background: var(--color-header-background);
}
body{
  background: var(--color-nav-background);
}
main{
background: var(--color-main-backround);
color: var(--color-text-backround);
}
nav {
  background: var(--color-nav-background);
}
footer {
  background: var(--color-footer-background);
  color: var(--color-text-backround);
}



/*bron: uit dlo*/

/* --------------------------
   Algemeen menu
--------------------------- */
header nav ul{
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}

header nav ul li:first-child{
  margin-right: auto;
}

header img{
  width: 120px;
  height: auto;
  display: block;
}

header img{
  width: 120px;   /* pas aan: 90–140px */
  height: auto;
  display: block;
}
/* --------------------------
   Search button
--------------------------- */
.search-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: #FE467C;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search-button svg {
    width: 60%;
    height: 60%;
}
/* text grote*/


.font-controls{
  display: flex;
  gap: 0.5em;
}

.font-controls button{
  background: #FE467C;
  color: white;
  border: none;
  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  font-weight: bold;
  cursor: pointer;
}

/* ========== HAMBURGER KNOP ========== */
.hamburger-streepjes{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #FE467C;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
}

/* streepjes */
.hamburger-streepjes span {
  display: block;
  width: 20px;
  height: 4px;
  background-color: white;
  border-radius: 2px;
  margin: 3px 0;
  transition: 0.3s ease;
}

/* ========== HAMBURGER MENU ========== */
.hamburger-menu {
  position: absolute;
  top: 70px;
  right: 20px;
  background-color: #FE467C;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  z-index: 1000;
}

/* open toestand (JS toggle) */
.hamburger-menu.open {
  max-height: 300px;
}

/* menu links */
.hamburger-menu li a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.hamburger-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
 
/* Zorg dat de spans mooi draaien vanuit het midden */
.hamburger-streepjes span {
  transform-origin: center;
}

/* ========== ANIMATIE: HAMBURGER -> KRUIS ========== */

/* optioneel: hele knop een klein beetje draaien net als je voorbeeld */
.hamburger-streepjes.is-active {
  transition: transform 0.3s ease-in-out;
  transition-delay: 0.1s;
  transform: rotate(45deg);
}

/* middelste streepje verdwijnt */
.hamburger-streepjes.is-active span:nth-child(2) {
  width: 0;
  opacity: 0;
}

/* bovenste streepje naar beneden */
.hamburger-streepjes.is-active span:nth-child(1) {
  transform: translateY(10px) ;
}

/* onderste streepje naar boven + 90 graden draaien */
.hamburger-streepjes.is-active span:nth-child(3) {
  transform: translateY(-10px) rotate(90deg);
}

/*bron https://creocodigo.blogspot.com/2021/04/hamburger-animation-using-css.html */



/* Popup paneel */
.hamburger-popup{
  position: fixed;
  top: 3.4em;            /* hoogte van je header (pas aan!) */
  margin-left: 8em;
  overflow: auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  padding: 18px;
  z-index: 4000;
}

/* Cards */
.menu-cards{
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: grid;
  gap: 12px;
}

.menu-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  padding: 18px;
  border-radius: 12px;
  background: #fde8ee;
  text-decoration: none;
  color: #111;
  font-weight: 900;
}

.menu-card i{
  font-size: 22px;
  color: #FE467C;
}

/* Links */
.menu-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  text-align: center;
}

.menu-links a{
  text-decoration: none;
  font-weight: 900;
  color: #FE467C;
}

.menu-links.muted{
  margin-top: 24px;
  text-align: center;
}

.menu-links.muted a{
  color: #9aa0a6;
  font-weight: 800;
  
}

section img {
    align-items: center;
    width: 100%;     /* past de foto aan de breedte van het scherm aan */
    height: auto;    /* behoudt verhoudingen */
    max-width: 20em; /* (optioneel) voorkomt dat ze té groot worden */
    display: block;   /* haalt rare whitespace weg */
    margin-bottom: 1em; /* ruimte tussen je foto's */
}

section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

section li {
    width: 100%;
}

.timeline {
    background-image: url("../images/zwartebalk.png");
    display: flex;
    align-items: center;
    padding: 0;
    margin:0;
    
}

h2{
    text-align: center;
    font-weight: bold;
}

#countdown {
    font-family: 'Inter var', Helvetica, system-ui, sans-serif;
    color: #FE467C;
    font-size: 20px;
}

.timeline p {
    margin-right: auto; 
    padding-left:1em;
    
}
 
.timeline button{
    background-color: #FE467C;
    margin-right: 2em;
    padding: 0.6em;

}



.strangerthings {
    background-image: url("../images/rodeachtergrond.jpg");
    background-size: cover;
    background-position: center;
    position: relative;      
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.strangerthings h3 {
    position: absolute;        /* zet tekst boven de afbeelding */
    top: 0.2em;   
    font-family: 'Inter var', Helvetica, system-ui, sans-serif;;              /* hoe ver vanaf de bovenkant */
    font-size: 2rem;
    font-style:oblique;
    color: white;              /* zodat het leesbaar blijft */
    text-shadow: 2px 2px 4px black; /* maakt tekst beter zichtbaar */
    transform: rotate(-3deg);
    z-index: 10;
}

.strangerthings button{
    position:absolute;
    top: 20em;
    padding: 1em 2em;
    border-radius: 2em;
    background-color: black;
    color: white;
}

.strangerthings img:hover{
    transform: scale(1.1);
    transform-origin: bottom;
}


.strangerthings img{
    transition: transform 0.2s ease; /*omdat het dan altijd geld*/

}

.aradir {
    background-image: url("../images/blauweachtergrond.png");
    position: relative;        /* nodig om h3 binnen dit element te positioneren */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    
}

.aradir h3 {
    position: absolute;        /* zet tekst boven de afbeelding */
    top: 0.2em;   
    font-family: 'Inter var', Helvetica, system-ui, sans-serif;;              /* hoe ver vanaf de bovenkant */
    font-size: 2rem;
    font-style:oblique;
    color: white;              /* zodat het leesbaar blijft */
    text-shadow: 2px 2px 4px black; /* maakt tekst beter zichtbaar */
    transform: rotate(-3deg);
    z-index: 10;
}

.aradir button{
   position: absolute;
   top: 17em;
    padding: 1em 2em;
    border-radius: 2em;
    background-color: black;
    color: white;
}

.aradir img:hover{
    transform: scale(1.1);
    transform-origin: bottom;
}

.aradir img{
    transition: transform 0.2s ease; /*omdat het dan altijd geld*/
    margin-top: 3em;

}

.peak {
    background-image: url("../images/groeneachtergrond.png");
    position: relative;        /* nodig om h3 binnen dit element te positioneren */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    
}

.peak h3 {
    position: absolute;        /* zet tekst boven de afbeelding */
    top: 0.2em;   
    font-family: 'Inter var', Helvetica, system-ui, sans-serif;;              /* hoe ver vanaf de bovenkant */
    font-size: 2rem;
    font-style:oblique;
    color: white;              /* zodat het leesbaar blijft */
    text-shadow: 2px 2px 4px black; /* maakt tekst beter zichtbaar */
    transform: rotate(-3deg);
    z-index: 10;
}

.peak button{
   position: absolute;
   top: 20em;
    padding: 1em 2em;
    border-radius: 2em;
    background-color: black;
    color: white;
}

.peak img:hover{
    transform: scale(1.1);
    transform-origin: bottom;
}

.peak img{
    transition: transform 0.2s ease; /*omdat het dan altijd geld*/

}


header li button{
    width: 50px;
    height: 50px;
    border-radius: 50%;      
    border: none;
    background-color: #FE467C;    
    color: white;
    font-size: 24px;       
}   
  


.carrousel {
    overflow: hidden;        /* voorkomt dat beelden eruit vallen */
    position: relative;
    overflow-x: auto;     /* horizontaal scrollbaar maken */
    overflow-y: hidden;   /* geen verticale scrollbalk */
    white-space: nowrap;  /* voorkomt afbreken */
    scroll-behavior: smooth; /* smooth scrollen */
    width: 100%;

}

.carrousel ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 1em;
    position: relative;
    left: 0;
    animation: bannermove 20s linear infinite;
}

.carrousel ul img {
    width: 10em;
    clip-path: polygon(
    10% 10%,    /* linker boven = laag  */
    100% 0%,   /* rechter boven = hoog */
    100% 90%,  /* rechter onder = laag */
    10% 100%    /* linker onder = hoog */
);
}


@keyframes bannermove {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}


.community {
  background-color: #FE467C;
  margin: 2em;
  padding: 3em 2em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;

 clip-path: polygon(
  0 5%,      /* linksboven iets naar beneden (minder diep) */
  100% 0%,   /* rechtsboven helemaal boven */
  100% 95%,  /* rechtsonder iets omhoog */
  0 100%     /* linkeronder normaal */
);
}

/* ===== TEKST ===== */
.community h2 {
  color: aliceblue;
  font-size: 3em;
  font-weight: 300;
  text-align: left;
  margin: 0;
}

.community p {
  color: aliceblue;
  max-width: 40em;
  margin: 0;
  text-align: left;
}

/* ===== BUTTON ===== */
.community button {
  margin-top: 1em;
  background-color: black;
  color: white;
  padding: 1em 2em;
  border-radius: 1em;
  border: none;
  cursor: pointer;
  width: fit-content;
}

/* ===== CARROUSEL ===== */
.communitycourrasel {
  overflow-x: hidden;
  margin-top: 2em;
}

.communitycourrasel ul {
  list-style: none;
  display: flex;
  gap: 3em;
  padding: 0;
  margin: 0;
  animation: bannermove 5s linear infinite;
}

/* ===== AFBEELDINGEN ===== */
.communitycourrasel img {
  width: 15em;
  border-radius: 1em;
  display: block;
}

@keyframes bannermove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/*bron chatgpt voor de clip-path*/


.livenow {
    display: flex;
    flex-direction: column;  
    align-items: center;     
    justify-content: center; 
    gap: 2em;               
}

/* Spinning animatie */
.spinning {
    display: inline-block;  
    animation: mySpinner 4s linear infinite;
    font-size: 3em;         
    color:#e03a6c;             
    text-align: center;
}

@keyframes mySpinner {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/*bron https://www.youtube.com/watch?v=HZHHBwzmJLk*/

.livenow ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4em;
    list-style: none;
    padding: 0;
}

.livenow ul img {
    background-color: #F3DBFF;
    padding: 1em;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    height: 8em;
    object-fit: contain;
}


.otsukaray {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7em;
    position: relative;
}

.otsukaray p:first-of-type {
    position: absolute;
    bottom: 8em;
    background: linear-gradient(90deg, #F3DBFF , #AB67EA);
    padding: 0.6em 1em;
    border-radius: 1em;
    font-size: 0.8em;
}

.otsukaray p:nth-of-type(2){
    color: gray;
   margin-top: 0.1em;
}
.otsukaray p:nth-of-type(3){
  margin-top: -1em;

}
.otsukaray h3{
    color: #AB67EA;
    margin-top: -0.5em;
    font-size: 1.3em;
}

.wiggly {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7em;
    position: relative;      
}


.wiggly p:first-of-type {
    position: absolute;
    bottom: 8em;
    background: linear-gradient(90deg, #25AC39, #9AE603);
    padding: 0.6em 1em;
    border-radius: 1em;
    font-size: 0.8em;
}


.wiggly p:nth-of-type(2){
    color: gray;
    margin-top: auto;
}

.wiggly p:nth-of-type(3){
  margin-top: -1em;

}
.wiggly h3{
    color: #38f144;
    margin-top: -0.5em;
    font-size: 1.3em;
}


.blackfridaydeal{
    display: grid;
    place-items: center;
    margin-top: 3em;
}




.negenicoon{
   position: absolute;
   padding: 1em 1em;
   margin: 1em 1em ;
    background-color: #AB67EA;
    margin-right: 4em;
    transform: rotate(2deg);
    clip-path: polygon(100% 50%, 94.016642033% 59.3560260868%, 95.6772728821% 70.3368321538%, 86.4057647469% 76.4503363532%, 83.4565303179% 87.1572412739%, 72.5% 88.9711431703%, 65.4508497187% 97.5528258148%, 54.703780847% 94.7534852916%, 44.7735768366% 99.7260947684%, 36.0942352531% 92.7975432333%, 25% 93.3012701892%, 19.8891227139% 83.4415171465%, 9.5491502813% 79.3892626146%, 8.8904544062% 68.3031489384%, 1.0926199641% 60.395584541%, 5.0000000034% 50.0000000005%, 1.0926199789% 39.6044154614%, 8.8904544593% 31.6968510698%, 9.5491504885% 20.6107374194%, 19.8891233248% 16.5584829594%, 25.0000020917% 6.6987301927%, 36.0942407425% 7.2024578193%, 44.7735937531% .2739086307%, 54.7038211889% 5.2465231853%, 65.4509636322% 2.4471991693%, 72.5002507348% 11.0289141303%, 83.4571879873% 12.8429150833%, 86.4071170675% 23.5499976242%, 95.6806032369% 29.6640210704%, 94.0231005276% 40.645688223%);

}
/*bron van de clip-path is https://youtooz.com/*/


.collectie {
    position: relative;      /* nodig voor absolute children */
    margin: 1em 1em;
     background-image: url("../images/kleinerodeachtergrond.png");
}

.collectie img {
    width: 100%;
    display: block;
}

.collectie h3 {
    position: absolute;
    bottom: 1em;          
    left: 1em;
    color: white;
    font-size: 1.8em;
    z-index: 10;
}

.collectie button {
    position: absolute;
    bottom: 0.5em;             
    left: 1em;
    padding: 1em 1.5em;
    border: none;
    background: black;
    color: white;
    border-radius: 1.5em;
    font-size: 1em;
    z-index: 10;
}

.collectie img:hover{
    transform: scale(1.1);
    transform-origin: bottom;
}


.upcoming ul {
    display: flex;
    flex-direction: row;
    align-items: stretch;  
    justify-content: center;
    text-align: center;
    gap: 4em;
}

.upcoming ul img{

    background-color: #c5c3c3;
    padding: 1em;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    height: 8em;           /* ← voeg toe */
    object-fit: contain;   /* ← houdt proporties netjes */

}

.draak{

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7em;
    position: relative;
}

.draak p:first-of-type {
    position: absolute;
    bottom: 10em;
    background-color: #acaaac;
    padding: 0.6em 1em;
    border-radius: 1em;
    font-size: 0.8em;
}

.draak p:nth-of-type(2){
    color: rgb(164, 162, 162);
}

.draak h3{
    color: grey;
    margin-top: -0.5em;
    font-size: 1.3em;
}

.hoodie{

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7em;
    position: relative;
}

.hoodie p:first-of-type {
    position: absolute;
    bottom: 10em;
    background-color: #acaaac;
    padding: 0.6em 1em;
    border-radius: 1em;
    font-size: 0.8em;
}

.hoodie p:nth-of-type(2){
    color: rgb(164, 162, 162);
   
}

.hoodie h3{
    color: grey;
    margin-top: -0.5em;
    font-size: 1.3em;
}


.pastdrops ul {
    display: flex;
    flex-direction: row;
    align-items: stretch;  
    justify-content: center;
    text-align: center;
    gap: 4em;
    
}
.pastdrops h3{
    text-align: center;
}

.pastdrops ul img{

    background-color: #c5c3c3;
    padding: 1em;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    height: 8em;          
  

}

.grunt{

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7em;
    position: relative;
   
}

.grunt p:first-of-type {
    position: absolute;
    bottom: 6em;
    background-color: #acaaac;
    padding: 0.6em 1em;
    border-radius: 1em;
    font-size: 0.8em;
}

.grunt p:nth-of-type(2){
    color: rgb(164, 162, 162);
}

.grunt h3{
    color: grey;
    margin-top: -0.5em;
    font-size: 1.3em;
}

.hunter{

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7em;
    position: relative;
}

.hunter p:first-of-type {
    position: absolute;
    bottom: 6em;
    background-color: #acaaac;
    padding: 0.6em 1em;
    border-radius: 1em;
    font-size: 0.8em;
}

.hunter p:nth-of-type(2){
    color: rgb(164, 162, 162);
}


.hunter h3{
    color: grey;
    margin-top: -0.5em;
    font-size: 1.3em;
}

.internet{
    background-color: #FE467C;
    font-weight: 900;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -2em;
}

footer{
    background-color: #FF4672;
     padding: 3rem 0 5rem;
}

.socials h1{
    text-align: center;
    color: white;
}
.socials ul{
   display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em ;
    gap: 1em;
}

.socials ul li {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 2em; 
    height: 2em; 
    color: white;
    font-size: 24px; /* grootte van het icoon */
    cursor: pointer;
    background-color: #FF819D;; /* voor nu dezelfde kleur */
    
}

.facebook,.twitter,.instagram ,.tiktok,.reddit {
    background-color: #ff4669;
}


.tabel ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none; 
    padding: 1em;
    margin: auto;
    
    
}


.tabel li {
    display: flex;          
    justify-content: space-between;
    border: 0.1em solid #e5e5e5;   
    padding: 0.5em;
    align-items: center;
}


.tabel li p {
    margin: 0 1em;       
}




.thumbnails {
    max-height: 20em;
    overflow-y: auto;  
    
}


.thumbnails ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.thumbnails li {
    margin-bottom: 10px;
    scroll-snap-align: start; 
}

.thumbnails img {
    width: 80px;
    display: block;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.2s;
}

.thumbnails img:hover {
    border: 2px solid #333;
}

.gallery-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}


.main-image img{
  display: flex;
  max-width: 100%;
  height: auto;
  margin-top: 4em;
}



.plush {
    display: flex;
    flex-direction: column;
}


.plush .label {
    order: -1;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: .2em;
}


.plush h1 {
    font-size: 2em;
    font-weight: 800;
    color: #c383eb; 
    margin: 0;
}


.plush .price {
    font-size: 1.4em;
    font-weight: 700;
    margin-top: .3em;
}


.shop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4em;
}

/* numberpicker + pijlen samen */
.numberpicker {
    display: flex;
    flex-direction: row;
    gap: 1em;
    align-items: center;

    border: 2px solid #ccc;
    border-radius: 3em;
    padding: 0.5em 1.5em;
}

/* getal */
.numberpicker p {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

/* pijlen */
.pijl {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    border-left: 1px solid #ccc;
    padding-left: 0.8em;
}

/* pijl knoppen */
.pijl button {
    background: #f0f0f0;
    border: none;
    padding: 0.2em 0.5em;
    cursor: pointer;
    font-size: 0.8em;
    line-height: 1;
    transition: background 0.2s;
}

.pijl button:hover {
    background: #ddd;
}

/* add to cart knop */
.shop > button {
    background-color: #FE467C;
    border-radius: 2em;
    padding: 1.5em 2em;
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.shop > button:hover {
    background-color: #e03a6c;
}

/* child combinator van https://www.w3schools.com/cssref/sel_element_gt.php*/ 


.preorder{
  position: relative;  
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  border: 1px solid #e5e5e5;
  padding: 1.2em 1.5em;      /* compacter */
  margin-top: 2em;

  width: 100%;
  max-width: 520px;          /* zorgt dat het er net uit ziet */
  box-sizing: border-box;
}

.preorder h2{
  font-size: 1em;
  font-weight: 1000;
  letter-spacing: 0.04em;
  margin-top: 0.5em;
}

.preorder p{
  margin: 0;
  color: #FE467C;
  font-weight: 900;
  font-size: 1.7em;          
  line-height: 1;
  white-space: nowrap;  
  margin-bottom: 2em;    
}

/* knop zoals rechts (pijltjes links/rechts) */
.preorder button{
    position: absolute;
    top: 9.2em;
  margin-top: 1em;           /* dichterbij */
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;

  padding: 0.9em 2.7em;
  border-radius: 2em;
  font-size: 1em;
  font-weight: 500;

  display: flex;
  align-items: center;
  gap: 0.9em; 

}


.ships{
    margin-top: 4em;
    margin-bottom: 1em;
}

.ships ul {
    margin: 0; /* of een kleine positieve waarde indien nodig */
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff467f;
    gap:1em;
    background-image: linear-gradient(180deg, #0000 calc(50% - 1px), #00000026 50%, #0000 calc(50% + 1px)), linear-gradient(to right, #ff467f, #ff4669 94%);
}


.ships li p{
   font-weight: bold;
   color: white;

}

.info ul{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 2em;
    color: #ef92ae;
    font-weight: bold;
    gap:2em
}


footer h2{
    text-align: center;
    font-size: 3em;
    font-weight: 1000;
    color: white;
}

/* UL met contact / shipping / track */
footer > ul:first-of-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0;
  margin: 2rem auto;
    clip-path: polygon(
    5% 0%,    /* linksboven schuin */
    100% 0%,  
    95% 100%, /* rechtsonder schuin */
    0% 100%
  );
}

/* De blokjes zelf */
footer > ul:first-of-type li {
  background-color: #FF819D;
  width: 280px;          
  padding: 1rem;
  text-align: center;
  list-style: none;
  color: white;
  font-weight: 1000;
    clip-path: polygon(
    5% 0%,    /* linksboven schuin */
    100% 0%,  
    95% 100%, /* rechtsonder schuin */
    0% 100%
  );

}

footer > ul:nth-of-type(2) {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
     list-style: none;
     text-align: center;
}

footer > ul:nth-of-type(2) li {
  margin: 0.5rem 0;
  color: #FFBCC9;
  font-weight: 800;
  gap: 2em;
}

header.button {
  position: relative;   /* nodig voor absolute positioning */
  height: 1em;         /* voorbeeldhoogte, pas aan indien nodig */
}

.button button {
  position: absolute;
  right: 1rem;           
  top: 50%;
  transform: translateY(-50%);

  font-size: 1.5em;      /* X groot maken */
  font-weight: bold;

  background-color: white;
  border: none;
  cursor: pointer;
}

.beschrijving h2{
 font-weight: 1000;
 text-align: left;
}


#addToCart.loading{
  cursor: wait;
  opacity: .7;
}

#addToCart.loading::after{
  content: "";
  width: 1em;
  height: 1em;
  margin-left: .5em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

.contact-form {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 5px;
  background-color: #FE467C;
}

.contact-form h2 {
  text-align: center;
  color: white;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  color: white;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 90%;
  padding: 1em;
  border-radius: 4px;
  border: none;
}

.contact-form button {
  width: 100%;
  padding: 1em;
  background-color: black;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #222;
}

.footer p{
    text-align: center;

}
.button{
  display: flex;
  justify-content: flex-end; /* duwt alles naar rechts */
  align-items: center;
  padding: 1em;
}

.close-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  border-radius: 50%;

  background: white;
  color: black;
  text-decoration: none;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
}