/** Shopify CDN: Minification failed

Line 10:0 Unexpected "{"
Line 10:1 Expected identifier but found "%"
Line 34:0 Unexpected "{"
Line 34:1 Expected identifier but found "%"
Line 83:2 Unexpected "}"

**/
{% style %}
  body {
    font-family: var(--font-body-family) !important;
    font-size: 16px; /* Pas aan naar wens */
  }

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading-family) !important;
    font-weight: 500 !important; /* Bronova is van zichzelf al krachtig */
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  /* Specifieke elementen die vaak hun eigen font-family pakken in dit thema */
  p, li, a, span, button, input, label {
       font-family: var(--bs-body-font-family) !important;
    font-weight: var(--bs-body-font-weight) !important;
    font-size: var(--bs-body-font-size);
  }

  /* De font-size fix voor body tekst die je eerder had (12px is erg klein, 14px of 16px is gangbaarder) */
  p, li, a {
    font-size: 14px; 
  }
{% endstyle %}

/* Aangepaste media gallery stijlen */
.product-gallery-items {
  display: grid;
  gap: 1rem;
}

.product-gallery__item {
  position: relative;
}

.product-gallery__item-button {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.product-gallery__item-image img {
  transition: transform 0.3s ease;
  width: 100%;
  height: auto;
}

.product-gallery__item-button:hover .product-gallery__item-image img {
  transform: scale(1.05);
}

/* Pas de thumbnails aan */
.media-gallery-thumbs .swiper-slide {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.media-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.fs-xxxl{
  font-size: 30px;
}
    #chat-button { 

       right: 30px !important;
    bottom: 200px !important;
    z-index: 999;
  }
  }

 #chat-window {
    z-index: 999;

  }

  #chat-campaigns {
       z-index: 999;

  } 
      .gorgias-chat-key-jm887a {
        z-index: 999 !important;
         bottom: 165px;
    }
.gorgias-chat-key-145qohm{
  z-index: 999 !important;
  bottom: 175px !important;
}
@media (max-width: 769px){
  /* Gorgias op mobiel.
     De chatknop is verhoogd om de sticky koopbalk (86px hoog) vrij te houden,
     maar de bubbels met voorgestelde vragen volgden niet: #chat-campaigns stond
     op 90px en #mount-floating-engagement-widget zelfs op 75px - die laatste
     viel dus achter de koopbalk. Ze staan nu boven de knop.

     Boven en niet eronder: tussen de knop (200px) en de koopbalk (86px) zit maar
     114px, en de bubbel is 343-415px breed op een scherm van 375px. Naast de knop
     past hij dus ook niet.

     De maten staan in variabelen zodat de bubbels meebewegen als je de knop
     nog eens verplaatst - dat is precies wat er nu misging.

     LET OP: hier bewust op id's gestuurd. De .gorgias-chat-key-* klassen die
     verderop in dit bestand staan zijn hashes die Gorgias per release opnieuw
     genereert; die van nu heten -1fzqqe7 / -gl1y8s / -1vly0ou, dus de oude
     regels raken niets meer. Id's blijven wel gelijk. */
  :root {
    /* 120px: de koopbalk is 86px hoog, dus dit houdt 34px lucht. Lager kan,
       maar dan gaat het icoon tegen de balk aan plakken. */
    --gorgias-knop-bottom: 120px;
    --gorgias-knop-hoogte: 74px;
    --gorgias-marge: 8px;
  }

  #chat-button {
    right: 30px !important;
    bottom: var(--gorgias-knop-bottom) !important;
    z-index: 999;
  }

  /* Deze twee containers zijn bij de voorgestelde vragen leeg (hoogte 0): die
     bubbels rendert Gorgias BINNEN de #chat-button iframe, die daarvoor van
     80x74 naar 300x150 groeit. De ruimte tussen icoon en bubbel zit dus binnen
     die iframe en is van Gorgias zelf - daar kunnen we niet in, het is een
     ander domein. Vandaar dat het geheel lager staat in plaats van alleen de
     bubbel. Deze regel blijft staan voor de campagnetypes die deze containers
     wel gebruiken; die volgen dan netjes de knop. */
  #chat-campaigns,
  #mount-floating-engagement-widget {
    bottom: calc(var(--gorgias-knop-bottom) + var(--gorgias-knop-hoogte) + var(--gorgias-marge)) !important;
  }

  /* Gorgias legt bij het openklappen een effect-laag onderaan het scherm: een
     lege div (geen kinderen, pointer-events none) met een gradient EN
     filter: blur(32px) + backdrop-filter: blur(2px). Die vervaagt alles wat
     erachter staat, wat op de pagina leest als een wazige schaduwband.
     Alleen background-image weghalen was niet genoeg - het effect zit in de
     filters. Vandaar dat die er hier ook uit gaan.
     Op de class-prefix gestuurd, want de hash erachter wisselt per release:
     gezien als -jm887a, -1fzqqe7 en -16r9nbg. Alleen div's, zodat de iframes
     met de daadwerkelijke chat ongemoeid blijven. */
  div[class*="gorgias-chat-key"] {
    background-image: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

 #chat-window {
    z-index: 999;

  }

  #chat-campaigns {
       z-index: 999;

  } 
      .gorgias-chat-key-jm887a {
        z-index: 999 !important;
        bottom: 175px;
    }
}
#gorgias-chat-container{
  z-index: 999;
}
@media (max-width: 768px){
.container{

  padding: 0 10px !important;
}
}
/* Verzendregel */
.cdr-shipping-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin: 10px 0;
  color: #333;
}

.cdr-shipping-line strong {
  /* Kleur staat in cart-drawer.css, bij de andere drawer-regels. Hier stond
     een tweede versie die het onderling won - dat is precies waarom de kleur
     niet doorkwam. */
  font-weight: 600;
}

/* Bespaar label */
.cdr-savings-total {
  border-radius: 4px !important;
}

/* Bespaar tekst niet in hoofdletters */
.cdr-savings-total__label {
  text-transform: none !important;
}
/* Verwijder groene felicitatie balk bovenin cart drawer */
.cdr-goal,
.cart-drawer-goal,
.cdr-progress,
.cdr-free-shipping,
[data-cdr-goal],
[data-cart-drawer-goal] {
  display: none !important;
}

/* Product bespaar labels */
.cdr-item__saving,
.cdr-item__badge,
.cdr-item__discount,
.cdr-savings-badge,
.cart-item__saving,
.cart-item__badge,
.cart-item__discount {
  background: #F7EDE9 !important;
  color: #000 !important;
  border: 1px solid #E8CFC5 !important;
  border-radius: 4px !important;
  text-transform: none !important;
}

/* Tekst in bespaar labels zwart */
.cdr-item__saving *,
.cdr-item__badge *,
.cdr-item__discount *,
.cdr-savings-badge *,
.cart-item__saving *,
.cart-item__badge *,
.cart-item__discount * {
  color: #000 !important;
}

/* Onderste bespaar balk */
.cdr-savings-total {
  background: #F7EDE9 !important;
  color: #000 !important;
  border: 1px solid #E8CFC5 !important;
  border-radius: 4px !important;
}

.cdr-savings-total * {
  color: #000 !important;
}
.mcart .mc-line__saved,
.mc-line__saved {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: #F7EDE9 !important;
  color: #000 !important;
  border: 1px solid #E8CFC5 !important;
  padding: 3px 9px;
  border-radius: 4px !important;
  font-size: 11px;
  font-weight: 700;
}
.mcart .mc-line__saved svg,
.mc-line__saved svg {
  color: #000 !important;
  stroke: #000 !important;
}
#offcanvas-cart .cdr-item__save,
#offcanvas-cart .cdr-line__save,
#offcanvas-cart .cdr-save,
#offcanvas-cart .cdr-saved,
#offcanvas-cart .cdr-savings,
#offcanvas-cart .cdr-item__savings {
  background: #F7EDE9 !important;
  color: #000 !important;
  border: 1px solid #E8CFC5 !important;
  border-radius: 4px !important;
}

#offcanvas-cart .cdr-item__save *,
#offcanvas-cart .cdr-line__save *,
#offcanvas-cart .cdr-save *,
#offcanvas-cart .cdr-saved *,
#offcanvas-cart .cdr-savings *,
#offcanvas-cart .cdr-item__savings * {
  color: #000 !important;
  stroke: #000 !important;
}
.cdr-item__discount-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-top: 4px;
  color: #000;
}

.cdr-item__discount-line strong {
  font-weight: 700;
}
.cdr-item__discount-line {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  background: #F7EDE9;
  border: 1px solid #E8CFC5;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: #000;
  margin-top: 6px;
}

.cdr-item__discount-line strong {
  font-weight: 700;
  white-space: nowrap;
}
.cdr-item__discount-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  background: #F7EDE9;
  border: 1px solid #E8CFC5;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: #000;
  margin-top: 6px;
}

.cdr-item__discount-amount {
  font-size: 12px;
  font-weight: 700;
  color: #000;
  margin-bottom: 2px;
}
@media (max-width: 600px) {
  .cdr-item__discount-line {
    display: none !important;
  }

  .cdr-item__savings {
    font-size: 0 !important;
  }

  .cdr-item__savings::before {
    content: "Korting verwerkt ";
    font-size: 10px;
    color: #000;
  }

  .cdr-item__savings strong {
    font-size: 10px !important;
  }
}