/* ======================================================
   BY4 – COMPLETE RESPONSIVE CSS (GOLD/ROZE GEHOUDEN)
   ====================================================== */

/* ---------- BASIS ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* voorkom horizontale scroll */
  font-family: 'Bitter', cursive;
  background-image: url("../Images/achtergrondsite2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}

#container { min-height: 100%; height: auto !important; }

/* ---------- HEADER & MENU ---------- */
#header {
  background-color: #cbb780; /* goud */
  color: black;
  width: 100%;
  min-height: 3.5em;
}

#headertekstlinks {
  margin: .1em 0;
  text-align: center;
  font-family: 'Pacifico', cursive;
  font-size: 2.5em;
}

#headertekstlinks a,
#headertekstlinks a:visited {
  text-decoration: none;
  color: black;
}

#headertekstrechts {
  text-align: center;
  margin-top: .3em;
  font-family: 'Lobster', cursive;
  font-size: 1.2em;
}

a.headerlink, a.headerlink:visited { color: black; text-decoration: none; }
a.headerlink:hover { color: #ff13a7; }

#menucontainer {
  background-color: #cbb780; /* goud */
  border-top: 0;
  font-family: 'Bitter', cursive;
  padding: .5em 0;
  width: 100%;
}

.menuhfdcat { display: block; padding: .5em; font-size: 1em; }
.menuhfdcat > a { display: block; text-decoration: none; color: black; }
.menuhfdcat:hover { background-color: #ff13a7; font-weight: bold; }

.menusubcat {
  display: none;
  position: absolute;
  left: calc(23% - 2px);
  top: 3.5em;
  background-color: #cbb780;
  border: 2px solid #ff13a7;
}
.menusubcat.actief { display: block; }

/* ---------- CONTENT-KAART OP HOUT ---------- */
#content {
  background-color: #fff;
  width: 92%;
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  text-align: left;
  position: relative; /* anker voor rechtsboven kaartje */
}

/* Intro-paragraaf verbergen (“By4 is de webshop…”) */
#content > p:first-of-type,
#content .tekstlinks > p:first-child { display: none !important; }

/* Titels */
h1 {
  font-family: 'Pacifico', cursive;
  font-size: 2em;
  margin: .5em 0;
}
h2 {
  font-family: 'Bitter', cursive;
  font-size: 1.2em;
  margin: 1em 0 .5em;
}

/* ---------- LEVERTIJD EIGEN STIJL (KLEIN KAARTJE) ---------- */
/* Buitenste kolom nooit een groot vlak laten worden */
.tekstrechts {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none;
  width: auto;
  max-width: none;
}

/* Geef het binnenste blok (voeg idealiter class .levertijd-card toe) */
.levertijd-card,
.tekstrechts .eigenstijldiv,         /* fallback op bestaande naam */
.tekstrechts > div:first-child {      /* laatste redmiddel */
  display: inline-block;
  width: 160px;
  max-width: 220px;
  background-color: #cbb780;          /* goud */
  border: 3px solid #ff13a7;          /* roze */
  border-radius: 10px;
  color: #000;
  padding: .6em .8em;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.levertijd-card .levertijd,
.tekstrechts .eigenstijldiv .levertijd { margin: .2em 0 0; font-weight: 700; }

.levertijd-card a,
.tekstrechts .eigenstijldiv a {
  color: #000;
  font-weight: 700;
  text-decoration: underline;
}
.levertijd-card a:hover,
.tekstrechts .eigenstijldiv a:hover { color: #ff13a7; }

/* Desktop/tablet: rechtsboven in het contentvlak */
@media (min-width: 901px) {
  .tekstrechts { position: absolute; top: 8.5rem; right: 2rem; z-index: 10; }
}

/* ---------- FOOTER ---------- */
#footer {
  background-color: #cbb780; /* goud */
  color: black;
  padding: 1em;
}
.footerkopje {
  font-family: 'Pacifico', cursive;
  font-size: 1.4em;
  margin: .5em 0;
}
.footerlink, a.footerlink:visited { color: black; text-decoration: none; font-weight: bold; }
a.footerlink:hover { color: #ff13a7; }
.lijn { background-color: black; border: 1px solid black; height: .2em; }

/* ---------- GENERIEK: AFBEELDINGEN ---------- */
img,
.afbeeldingcat, .afbbreder, .afbhoger, .afbvierkant,
.prodafbeelding, .productafbeeldingsmall {
  max-width: 100%;
  height: auto;
  display: block;
}
.afbeeldingcat { vertical-align: middle; }
.prodafbeelding { border: 1px solid grey; }
.productafbeeldingsmall { border: 1px solid grey; margin: .2em auto; }

/* ======================================================
   MOBIEL (≤600px)
   ====================================================== */
@media (max-width: 600px) {

  /* Gouden balken full-width en egaal */
  #header, #menucontainer, #footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: #cbb780 !important;
  }

  #headertekstlinks, #headertekstrechts {
    text-align: center !important;
    float: none !important;
    margin: .2em 0 !important;
  }

  /* Menu stack */
  .menuhfdcat > a { width: 100%; font-size: 1em; padding: .8em; }

  .menusubcat {
    position: static !important;
    display: none;
    background-color: #cbb780;         /* jouw 2e goud */
    border-top: 1px solid #ff13a7;
    padding: .4rem 1rem .6rem 1.5rem;
  }
  .menuhfdcat.actief .menusubcat,
  .menuhfdcat:focus-within .menusubcat { display: block; }

  .menusubcat-content a {
    display: block;
    width: 100%;
    padding: .45rem 0;
    text-decoration: none;
    color: black;
    font-size: 1rem;
  }
  .menusubcat-content a:hover { font-weight: bold; text-decoration: underline; }

  /* Content-kaart iets breder zodat hout links/rechts zichtbaar blijft */
  #content {
    width: 96%;
    padding: 1rem;
    margin: 1rem auto;
    border-radius: 10px;
    text-align: left;
  }

  /* Oude floats/kolommen netjes stapelen */
  [class*="col-"],
  .winkelwagencol,
  .inloggenlinks,
  .inloggenrechts {
    display: block;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Product-rijen */
  [class*="prod-"],
  [class*="prod-t"] {
    display: block;
    width: 100%;
    height: auto;
    padding-bottom: 1.2em;
    border-bottom: 2px solid #edabc1;
  }

  /* Verzenden/betalen niet inspringen */
  .verzendenbetalen {
    border-top: 2px solid black;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left;
  }

  /* Bestellen-blokken */
  .bestellen { display: none; }
  .bestellenmob { display: block; width: 100%; margin-top: 1.5rem; }
  .bestellenbutton { display: block; width: 90%; max-width: 420px; margin: 0 auto; }

  /* Levertijd-kaartje onder de titel en gecentreerd */
  .tekstrechts {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 1rem auto 0 !important;
    text-align: center !important;
  }
  .levertijd-card,
  .tekstrechts .eigenstijldiv,
  .tekstrechts > div:first-child {
    float: none !important;
    width: 70% !important;
    max-width: 18rem !important;
    margin: 0 auto !important;
  }

  /* Footer centreren */
  .footerkopje, .footerlink { text-align: center !important; padding: .5em 0; }
}

/* ======================================================
   TABLET (600–900px)
   ====================================================== */
@media (min-width: 601px) and (max-width: 900px) {
  .tekstrechts { position: absolute; top: 8.5rem; right: 1.25rem; }
  .levertijd-card,
  .tekstrechts .eigenstijldiv,
  .tekstrechts > div:first-child { width: 160px; }
}

/* ============ MOBILE FIX PACK (≤600px) ============ */
@media (max-width: 600px){

  /* Content-kaart: netjes gecentreerd, hout zichtbaar links/rechts */
  #content{
    width: 96%;
    margin: 1rem auto;
    padding: 1rem;
    border-radius: 10px;
    text-align: left;
  }

  /* Toon de intro-paragraaf weer (was eerder verborgen) */
  #content > p:first-of-type,
  #content .tekstlinks > p:first-child{
    display: block !important;
  }

  /* Linkerkolom full-width op mobiel */
  .tekstlinks{
    width: 100% !important;
    margin: 0 !important;
  }

  /* Geen “zijbalk”: houder van het kaartje resetten */
  .tekstrechts{
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    margin: .5rem auto 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center !important;
  }

  /* Het kaartje zelf – klein, gecentreerd, GOUD + ROZE */
  .levertijd-card,
  .tekstrechts .eigenstijldiv,
  .tekstrechts > div:first-child{
    display: block !important;
    width: 78% !important;           /* mooi smal op mobiel */
    max-width: 22rem !important;
    margin: .5rem auto 1rem !important;

    background-color: #cbb780 !important;   /* GOUD */
    border: 3px solid #ff13a7 !important;   /* ROZE RAND */
    border-radius: 10px !important;
    color: #000 !important;

    padding: .8rem 1rem !important;
    text-align: center !important;
    line-height: 1.25 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  }

  .levertijd-card .levertijd,
  .tekstrechts .eigenstijldiv .levertijd{
    margin: .2rem 0 0 !important;
    font-weight: 700 !important;
  }

  .levertijd-card a,
  .tekstrechts .eigenstijldiv a{
    color: #000 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
  }
  .levertijd-card a:hover,
  .tekstrechts .eigenstijldiv a:hover{
    color: #ff13a7 !important;
  }
}

/* ============ DESKTOP/TABLET TWEAKS (≥901px) ============ */
/* Zorg dat eventuele oude “gouden zijbalk” op desktop niet terugkomt */
.tekstrechts{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none;
  width: auto;
  max-width: none;
}

/* Levertijd-kaartje mag rechtsboven naast de titel staan op brede schermen */
@media (min-width: 901px){
  .tekstrechts{ position: absolute; top: 8.5rem; right: 2rem; z-index: 10; }
  .levertijd-card,
  .tekstrechts .eigenstijldiv,
  .tekstrechts > div:first-child{
    width: 160px !important;
    max-width: 220px !important;
    background-color: #cbb780 !important;
    border: 3px solid #ff13a7 !important;
  }
}
/* ===== FINAL OVERRIDES ===== */

/* 1) Intro-paragraaf verbergen (alle breakpoints) */
#content > p:first-of-type,
#content .tekstlinks > p:first-child {
  display: none !important;
}

/* 2) Mobiel/tablet: één kolom + kaartje gecentreerd en goud/roze */
@media (max-width: 900px) {
  #content { display:block !important; }

  .tekstlinks,
  .tekstrechts {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .tekstrechts {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    display: block !important;
  }

  /* Pak het kaartje, ook als het geen .levertijd-card heeft */
  .tekstrechts .levertijd-card,
  .tekstrechts .eigenstijldiv,
  .tekstrechts > div:first-child {
    display: block !important;
    width: 78% !important;
    max-width: 22rem !important;
    margin: .6rem auto 1rem !important;

    background-color: #cbb780 !important;   /* GOUD */
    border: 3px solid #ff13a7 !important;   /* ROZE RAND */
    border-radius: 10px !important;
    color: #000 !important;
    padding: .8rem 1rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  }

  .tekstrechts .levertijd-card .levertijd,
  .tekstrechts .eigenstijldiv .levertijd { 
    margin: .2rem 0 0 !important; 
    font-weight: 700 !important; 
  }

  .tekstrechts .levertijd-card a,
  .tekstrechts .eigenstijldiv a {
    color: #000 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
  }
  .tekstrechts .levertijd-card a:hover,
  .tekstrechts .eigenstijldiv a:hover {
    color: #ff13a7 !important;
  }
}

/* 3) Desktop: kaartje rechtsboven in het contentvlak, compact */
@media (min-width: 901px) {
  .tekstrechts {
    position: absolute !important;
    top: 8.5rem !important;
    right: 2rem !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  .tekstrechts .levertijd-card,
  .tekstrechts .eigenstijldiv,
  .tekstrechts > div:first-child {
    width: 160px !important;
    max-width: 220px !important;
    background-color: #cbb780 !important;
    border: 3px solid #ff13a7 !important;
    border-radius: 10px !important;
    padding: .6rem .8rem !important;
  }
}
/* ===== MOBIEL: producttegels full-width gecentreerd ===== */
@media (max-width: 600px){

  /* 1) Containers van producten: 100% breed en gecentreerd */
  [class*="prod-"],
  .producttile,
  .product,
  .productcard,
  .productafb,
  .productrow > div {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 520px;              /* optioneel: iets smaller voor mooie marges */
    margin: 0 auto 1.25rem !important;
    text-align: center !important;
  }

  /* 2) Afbeeldingen in producten: altijd 100% breed */
  .prodafbeelding,
  .productafbeelding,
  .productafbeeldingsmall,
  .producttile img,
  .product img,
  .productafb img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto .5rem !important;
  }

  /* 3) Teksten en prijs/voorraad centreren */
  .producttitel,
  .productnaam,
  .prijsproduct,
  .actieprijsproduct,
  .voorraad,
  .voorraadenkele,
  .voorraadgeen {
    text-align: center !important;
  }

  /* 4) Knoppen gecentreerd en breed */
  .meerinfo,
  .bestellenbutton,
  .winkelwagenbutton {
    display: block !important;
    width: 90% !important;
    max-width: 420px;
    margin: .5rem auto !important;
  }

  /* 5) Oude desktop-regels neutraliseren */
  .productafb { margin-left: 0 !important; width: 100% !important; }
}
/* ===== PRODUCTAFBEELDINGEN VOLLE BREEDTE OP MOBIEL ===== */
@media (max-width: 600px) {
  /* alle productafbeeldingen */
  img.prodafbeelding,
  .prodafbeelding img,
  .productafbeelding img,
  .producttile img,
  .product img,
  .productafb img,
  .productafbeeldingsmall img,
  .productafbeelding,
  .productafbeeldingsmall {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 0.8rem !important;
    border: none !important;
  }

  /* de container eromheen ook centreren */
  .productafb,
  .prodafbeelding,
  .producttile,
  .product {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 1.5rem !important;
    text-align: center !important;
  }
}
/* ===== MOBIEL: productfoto's echt full-width & gecentreerd ===== */
@media (max-width: 600px) {
  /* containers van elk product/blok */
  .productafb,
  .productenlijst .product,
  .producten .product,
  .producttile,
  .product,
  [class*="prod-"],
  .prodafbeelding {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;   /* mag je weghalen als je 100% wilt */
    margin: 0 auto 1.25rem !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* neutraliseer oude desktop-instelling */
  .productafb { margin-left: 0 !important; }

  /* de afbeelding zelf */
  .productafb img,
  .prodafbeelding img,
  img.productafbeelding,
  .productafbeelding,
  .productafbeeldingsmall,
  .product a img,
  .product img,
  .producttile img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto .75rem !important;
    border: 0 !important;
    transform: none !important;    /* voorkomt hover-scale die kan clippen */
  }
}
/* ===== MOBIEL: FORCEER PRODUCTFOTO'S 100% BREED & GECENTREERD ===== */
@media (max-width: 900px) {

  /* Containers van productblokken: geen floats, 100% breed, centreren */
  #content .productafb,
  #content .prodafbeelding,
  #content .productafbeelding,
  #content .producttile,
  #content .product,
  #content [class*="prod-"],
  #content .productrow > div {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;    /* wil je écht full bleed? haal deze regel weg */
    margin: 0 auto 1.25rem !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Neutraliseer oude desktop-regels (zoals margin-left:25% / width:50%) */
  #content .productafb { margin-left: 0 !important; width: 100% !important; }

  /* De afbeeldingen zelf: blok, 100% breed, auto hoogte, gecentreerd */
  #content .productafb img,
  #content .prodafbeelding img,
  #content img.productafbeelding,
  #content .productafbeelding img,
  #content .productafbeeldingsmall img,
  #content .producttile img,
  #content .product img,
  #content .prod-1 img,
  #content .prod-2 img,
  #content .prod-3 img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto .75rem !important;
    float: none !important;
    border: 0 !important;
    transform: none !important;  /* voorkomt hover-zoom die kan clippen */
  }

  /* Teksten/prijs onder de foto centreren voor consistentie */
  #content .producttitel,
  #content .productnaam,
  #content .prijsproduct,
  #content .actieprijsproduct,
  #content .voorraad,
  #content .voorraadenkele,
  #content .voorraadgeen {
    text-align: center !important;
  }

  /* Knoppen breed en gecentreerd */
  #content .meerinfo,
  #content .bestellenbutton,
  #content .winkelwagenbutton {
    display: block !important;
    width: 90% !important;
    max-width: 420px !important;
    margin: .5rem auto !important;
  }
}
/* ===== MOBIEL: FORCE-CENTER PRODUCTEN & FOTO'S ===== */
@media (max-width: 600px) {

  /* 1) Containers van producten: geen floats, full width, gecentreerd */
  #content [class*="prod"],
  #content [class*="product"],
  #content .productrow > div,
  #content .productafb,
  #content .prodafbeelding,
  #content .productafbeelding,
  #content .producttile,
  #content .product {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;     /* wil je echt edge-to-edge? verwijder deze regel */
    margin: 0 auto 1.25rem !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 2) Oude desktop-regels neutraliseren (vb. margin-left:25%; width:50%) */
  #content .productafb { margin-left: 0 !important; width: 100% !important; }
  #content .prodafbeelding { width: 100% !important; }

  /* 3) De foto’s zelf: blok, 100% breed, auto hoogte, gecentreerd */
  #content img.productafbeelding,
  #content .productafb img,
  #content .prodafbeelding img,
  #content .productafbeelding img,
  #content .productafbeeldingsmall img,
  #content .producttile img,
  #content .product img,
  #content [class*="prod"] img,
  #content [class*="product"] img {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto .75rem !important;
    border: 0 !important;
    transform: none !important;     /* voorkom hover-zoom clipping */
  }

  /* 4) Titels/prijs/voorraad onder de foto centreren */
  #content .producttitel,
  #content .productnaam,
  #content .prijsproduct,
  #content .actieprijsproduct,
  #content .voorraad,
  #content .voorraadenkele,
  #content .voorraadgeen {
    text-align: center !important;
  }

  /* 5) Knoppen breed en gecentreerd */
  #content .meerinfo,
  #content .bestellenbutton,
  #content .winkelwagenbutton {
    display: block !important;
    width: 90% !important;
    max-width: 420px !important;
    margin: .5rem auto !important;
  }
}
/* ===== MOBILE ULTRA-FIX: productfoto's 100% breed & gecentreerd ===== */
@media (max-width: 1024px) { /* breder bereik zodat het zeker pakt */

  /* 1) Houders van producten: 100% breed, geen floats, centreren */
  #content .productafb,
  #content .prodafbeelding,
  #content .productafbeelding,
  #content .productafbeeldingsmall,
  #content .product,
  #content .producttile,
  #content .productenlijst .product,
  #content [class*="prod-"],
  #content .productrow > div {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto 1.25rem !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 2) Neutraliseer oude desktop-regels (zoals width:50%; margin-left:25%) */
  #content .productafb { margin-left: 0 !important; }

  /* 3) De afbeeldingen zelf: ALTÍJD 100% breed, geen max-height, gecentreerd */
  #content img,
  #content img.prodafbeelding,
  #content img.productafbeelding,
  #content .productafb img,
  #content .prodafbeelding img,
  #content .productafbeelding img,
  #content .productafbeeldingsmall img,
  #content .product img,
  #content .producttile img,
  #content [class*="prod-"] img {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto .75rem !important;
    border: 0 !important;
    transform: none !important; /* geen hover-zoom clipping */
  }
}
/* ===== MOBIEL ULTRA-CENTER VOOR PRODUCTEN (pakt ook UL/LI varianten) ===== */
@media (max-width: 900px) {
  /* 0) Algemene reset van product-lijsten */
  #content ul,
  #content ol {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  #content ul li,
  #content ol li {
    list-style: none !important;
  }

  /* 1) Product-lijsten/grids: maak er een kolom van en centreer */
  #content .productenlijst,
  #content .producten,
  #content .productoverzicht,
  #content .productgrid,
  #content .productrow,
  #content ul[class*="prod"],
  #content ul.products,
  #content .categoryproducts {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* centreer de kinderen horizontaal */
    gap: 1rem !important;
  }

  /* 2) Elk product-item 100% breed en gecentreerd (werkt voor div LI varianten) */
  #content .product,
  #content .producttile,
  #content .productafb,
  #content .prodafbeelding,
  #content .productafbeelding,
  #content .productafbeeldingsmall,
  #content [class*="prod-"],
  #content ul.products > li,
  #content ul[class*="prod"] > li,
  #content .productrow > div {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;         /* wil je full-bleed? verwijder deze regel */
    margin: 0 auto 1.25rem !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 3) Product-link om de afbeelding heen ook blokkeren/centreren */
  #content .product a,
  #content .producttile a,
  #content ul.products > li a,
  #content ul[class*="prod"] > li a {
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* 4) Neutraliseer oude desktop-regels (zoals .productafb { margin-left:25%; width:50% }) */
  #content .productafb { margin-left: 0 !important; width: 100% !important; }
  #content .prodafbeelding { width: 100% !important; }

  /* 5) De foto’s zelf: blok, 100% breed, auto hoogte, gecentreerd */
  #content img.productafbeelding,
  #content .productafb img,
  #content .prodafbeelding img,
  #content .productafbeelding img,
  #content .productafbeeldingsmall img,
  #content .producttile img,
  #content .product img,
  #content ul.products > li img,
  #content ul[class*="prod"] > li img,
  #content [class*="prod-"] img {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto .75rem !important;   /* horizontaal centreren + ruimte eronder */
    border: 0 !important;
    transform: none !important;         /* geen hover-zoom clipping */
  }

  /* 6) Teksten/prijs gecentreerd voor consistentie */
  #content .producttitel,
  #content .productnaam,
  #content .prijsproduct,
  #content .actieprijsproduct,
  #content .voorraad,
  #content .voorraadenkele,
  #content .voorraadgeen {
    text-align: center !important;
  }
}
/* ===========================================================
   🛠️ ULTIMATE FIX: PRODUCTAFBEELDINGEN VOLLEDIG CENTREREN
   =========================================================== */
@media (max-width: 1200px) {

  /* 1️⃣ – Reset elke mogelijke productcontainer */
  [class*="prod-"],
  .product,
  .producttile,
  .productafb,
  .prodafbeelding,
  .productafbeelding,
  .productafbeeldingsmall,
  .productenlijst,
  .productoverzicht,
  .productgrid,
  .productrow,
  ul.products,
  ul[class*="prod"],
  ul.products > li,
  ul[class*="prod"] > li {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 1.5rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* 2️⃣ – Forceer de afbeelding zelf */
  img.productafbeelding,
  .productafb img,
  .prodafbeelding img,
  .productafbeelding img,
  .productafbeeldingsmall img,
  .producttile img,
  .product img,
  ul.products > li img,
  ul[class*="prod"] > li img,
  [class*="prod-"] img {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 480px !important;   /* veilige max-breedte op mobiel/tablet */
    height: auto !important;
    margin: 0 auto !important;
    border: none !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* 3️⃣ – Tekst onder de afbeelding mooi centreren */
  .producttitel,
  .productnaam,
  .prijsproduct,
  .actieprijsproduct,
  .voorraad,
  .voorraadenkele,
  .voorraadgeen {
    display: block !important;
    text-align: center !important;
    margin: 0.25rem auto !important;
  }

  /* 4️⃣ – Eventuele afwijkende breedtes van desktop overschrijven */
  .productafb,
  .prod-2,
  .prod-3,
  .prod-4 {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
  }
}

/* ===========================================================
   ✨ HOMEPAGE LOGO'S KLEINER OP MOBIEL
   =========================================================== */
@media (max-width: 600px) {
  #content p img,
  #content .tekstlinks img,
  #content img[src*="logo"],
  #content img[src*="Logo"],
  #content img[src*="handgemaakt"] {
    display: inline-block !important;
    width: 55% !important;         /* kleiner weergegeven */
    max-width: 200px !important;   /* maximale breedte */
    height: auto !important;
    margin: 0.5rem auto !important;
  }

  #content p,
  #content .tekstlinks {
    text-align: center !important;
  }
}
/* =============== MOBIEL: productlijst 1 kolom + foto 100% breed =============== */
@media (max-width: 600px) {

  /* 1) Lijstcontainers: niet meer naast elkaar, geen linkermarge van UL */
  #content ul.products,
  #content .productenlijst,
  #content .productoverzicht,
  #content .productgrid,
  #content .productrow {
    display: block !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* 2) Elk product-item: blok, full width, centreren */
  #content ul.products > li,
  #content .productenlijst > li,
  #content .productoverzicht > li,
  #content .productgrid > li,
  #content .productrow > div,
  #content .product {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 auto 1.25rem !important;
    padding: 0 !important;
    text-align: center !important;
    list-style: none !important;
  }

  /* 3) BREKEN van de oude 2-koloms indeling (beeld links / tekst rechts) */
  #content .productafb,
  #content .prodafbeelding,
  #content .productafbeelding,
  #content .productafbeeldingsmall,
  #content .product .left,
  #content .product .right {
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* 4) De afbeelding zelf: full width + gecentreerd */
  #content .productafb img,
  #content .prodafbeelding img,
  #content img.productafbeelding,
  #content img.productafbeeldingsmall,
  #content ul.products > li img,
  #content .product img {
    display: block !important;
    float: none !important;
    width: 100% !important;      /* benut volledige kaartbreedte */
    max-width: 520px !important; /* of verwijder deze regel voor echt edge-to-edge */
    height: auto !important;
    margin: 0 auto .75rem !important;
    border: 0 !important;
  }

  /* 5) Teksten onder de foto centreren */
  #content .producttitel,
  #content .productnaam,
  #content .prijsproduct,
  #content .actieprijsproduct,
  #content .voorraad,
  #content .voorraadenkele,
  #content .voorraadgeen {
    text-align: center !important;
    margin-left: 0 !important;
  }

  /* 6) Knoppen breed & gecentreerd */
  #content .meerinfo,
  #content .bestellenbutton,
  #content .winkelwagenbutton {
    display: block !important;
    width: 90% !important;
    max-width: 420px !important;
    margin: .5rem auto !important;
  }
}
/* ===========================================================
   📱 MOBIEL: productoverzicht in 1 kolom, gecentreerd & compacter
   =========================================================== */
@media (max-width: 600px) {

  /* Lijstcontainers */
  #content ul.products,
  #content .productenlijst,
  #content .productoverzicht,
  #content .productgrid,
  #content .productrow {
    display: block !important;
    padding-left: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* Elk product-item: full-width, gecentreerd */
  #content ul.products > li,
  #content .productenlijst > li,
  #content .productoverzicht > li,
  #content .productgrid > li,
  #content .productrow > div,
  #content .product {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 1rem !important;
    padding: 0.5rem 0 !important;
    text-align: center !important;
    list-style: none !important;
  }

  /* Breek oude kolomlayout */
  #content .productafb,
  #content .prodafbeelding,
  #content .productafbeelding,
  #content .productafbeeldingsmall,
  #content .product .left,
  #content .product .right {
    float: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Afbeelding: 100% breed en mooi uitgelijnd */
  #content .productafb img,
  #content .prodafbeelding img,
  #content img.productafbeelding,
  #content img.productafbeeldingsmall,
  #content ul.products > li img,
  #content .product img {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 480px !important;
    height: auto !important;
    margin: 0 auto .5rem !important;
    border: 0 !important;
  }

  /* Titels, prijs, voorraad: compacter onder elkaar */
  #content .producttitel,
  #content .productnaam {
    font-size: 1.15em !important;
    margin: 0.4rem 0 0.2rem !important;
    text-align: center !important;
  }

  #content .prijsproduct,
  #content .actieprijsproduct {
    font-size: 1em !important;
    margin: 0.2rem 0 0.1rem !important;
    text-align: center !important;
    font-weight: 600 !important;
  }

  #content .voorraad,
  #content .voorraadenkele,
  #content .voorraadgeen {
    font-size: 0.95em !important;
    margin: 0.1rem 0 0.3rem !important;
    text-align: center !important;
    color: #007a00 !important; /* groene voorraadkleur */
  }

  /* Knoppen mooi aansluiten, breed & gecentreerd */
  #content .meerinfo,
  #content .bestellenbutton,
  #content .winkelwagenbutton {
    display: block !important;
    width: 90% !important;
    max-width: 420px !important;
    margin: 0.4rem auto 0.8rem !important;
    text-align: center !important;
  }

  /* Extra: voorkom te veel wit tussen producten */
  #content ul.products > li:last-child,
  #content .productoverzicht > li:last-child {
    margin-bottom: 1rem !important;
  }
}
/* ===========================================================
   📱 ULTIME FIX: Producten gecentreerd, grote foto's, compacte tekst
   =========================================================== */
@media (max-width: 800px) {

  /* Productlijst-containers */
  #content ul.products,
  #content .productenlijst,
  #content .productoverzicht,
  #content .productgrid,
  #content .productrow {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Elk product-item volledig in het midden */
  #content ul.products > li,
  #content .productenlijst > li,
  #content .productoverzicht > li,
  #content .productgrid > li,
  #content .productrow > div,
  #content .product {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 1rem !important;
    padding: 0.4rem 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Afbeelding: groot en écht gecentreerd */
  #content ul.products img,
  #content .product img,
  #content .prodafbeelding img,
  #content .productafbeelding img,
  #content img.productafbeelding,
  #content img.productafbeeldingsmall {
    display: block !important;
    float: none !important;
    width: 90% !important;      /* groter weergegeven */
    max-width: 480px !important;
    height: auto !important;
    margin: 0 auto 0.5rem auto !important;
    border: none !important;
  }

  /* Titel direct onder afbeelding */
  #content .producttitel,
  #content .productnaam {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    margin: 0.4rem 0 0.2rem !important;
    line-height: 1.2 !important;
  }

  /* Korte beschrijving – kleiner lettertype, minder witruimte */
  #content .productomschrijving {
    font-size: 0.95em !important;
    margin: 0.1rem 0 0.2rem !important;
    line-height: 1.3 !important;
  }

  /* Prijs dichterbij titel */
  #content .prijsproduct,
  #content .actieprijsproduct {
    font-size: 1em !important;
    font-weight: 700 !important;
    margin: 0.1rem 0 !important;
    line-height: 1.1 !important;
  }

  /* Voorraadtekst vlak onder prijs */
  #content .voorraad,
  #content .voorraadenkele,
  #content .voorraadgeen {
    font-size: 0.95em !important;
    color: #008000 !important;
    margin: 0.1rem 0 0.3rem !important;
    line-height: 1.2 !important;
  }

  /* Knop dicht op tekst */
  #content .meerinfo,
  #content .bestellenbutton,
  #content .winkelwagenbutton {
    display: block !important;
    width: 90% !important;
    max-width: 420px !important;
    margin: 0.3rem auto 0.8rem !important;
  }
}
/* ===========================================================
   📱 PRODUCTEN: centreren, grotere foto's, compacte tekststapel
   =========================================================== */
@media (max-width: 800px) {

  /* Container van alle producten */
  #content ul.products,
  #content .productenlijst,
  #content .productoverzicht,
  #content .productgrid,
  #content .productrow {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Elk productkaartje */
  #content ul.products > li,
  #content .productenlijst > li,
  #content .productoverzicht > li,
  #content .productgrid > li,
  #content .productrow > div,
  #content .product {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 1rem !important;
    padding: 0.5rem 0 !important;
    text-align: center !important;
    list-style: none !important;
    line-height: 1.3 !important;
  }

  /* Afbeelding */
  #content ul.products img,
  #content .product img,
  #content .prodafbeelding img,
  #content .productafbeelding img,
  #content img.productafbeelding,
  #content img.productafbeeldingsmall {
    display: block !important;
    width: 90% !important;
    max-width: 480px !important;
    height: auto !important;
    margin: 0 auto 0.6rem !important;
    border: none !important;
    float: none !important;
  }

  /* Titel */
  #content .producttitel,
  #content .productnaam {
    font-size: 1.15em !important;
    font-weight: 600 !important;
    margin: 0.2rem 0 0.2rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Beschrijving */
  #content .productomschrijving {
    font-size: 0.95em !important;
    margin: 0.1rem 0 0.2rem !important;
    line-height: 1.3 !important;
  }

  /* Prijs direct onder titel/beschrijving */
  #content .prijsproduct,
  #content .actieprijsproduct {
    font-size: 1em !important;
    font-weight: 700 !important;
    margin: 0.2rem 0 0.1rem !important;
    line-height: 1.1 !important;
  }

  /* Voorraad meteen onder prijs */
  #content .voorraad,
  #content .voorraadenkele,
  #content .voorraadgeen {
    font-size: 0.95em !important;
    color: #008000 !important;
    margin: 0.1rem 0 0.4rem !important;
    line-height: 1.2 !important;
  }

  /* Knop direct onder voorraad */
  #content .meerinfo,
  #content .bestellenbutton,
  #content .winkelwagenbutton {
    display: block !important;
    width: 90% !important;
    max-width: 420px !important;
    margin: 0.2rem auto 0.8rem !important;
    text-align: center !important;
  }

  /* Extra fix om alles mooi compact te houden */
  #content ul.products > li > *:not(:last-child) {
    margin-bottom: 0.25rem !important;
  }
}