/** Shopify CDN: Minification failed

Line 555:0 Unexpected "}"

**/
/* ============================================================
   DEEM — premium custom layer bovenop Dawn
   Huisstijl: #7E0034 bordeaux · #A8305C taupe · #FFE2ED zand
   ============================================================ */

/* DEEM: standaard 16px-basis i.p.v. Dawn's 62.5% — secties zijn hierop ontworpen.
   Op grote schermen groeit de basis licht mee (16px → max 20px), zodat ALLES
   proportioneel meeschaalt: fonts, witruimte én de (rem-gebaseerde) paginabreedte.
   Tot ~1820px blijft het exact 16px, dus mobiel/laptop verandert niet. */

:root {
  --deem-wine: #7e0034;
  --deem-wine-deep: #3a0018;
  --deem-wine-soft: #a8305c;
  --deem-blush: #ffe2ed;
  --deem-surface: #fff3f5;
  --deem-ink: #7e0034;
  --deem-gold: #e3af42;
  --deem-gold-light: #fee891;

  /* Goud zit in kleine dingen: een cijfer, een sterretje in de loopband, een
     zegel. Groter ingezet wordt het snel schreeuwerig. */

  --deem-radius: 16px;
  --deem-radius-lg: 24px;

  /* Twee letters, meer niet. Montserrat draagt koppen, tekst en cijfers;
     Caveat is het accentwoord in een kop en het handgeschreven briefje. Geen
     serif: die hoort bij een ander merk. */
  --font-brand: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-script: 'Caveat', 'Segoe Script', cursive;
  /* Dawn-variabelen overschrijven */
  --font-heading-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 800;
  --font-body-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* HOOFDLETTER-koppen in Montserrat — de DEEM-signatuur (zoals de oude site) */
h1, h2,
.h0, .h1, .h2,
.deem-head__title,
.deem-hero__title,
.deem-cta__title,
.deem-card__title,
.deem-c2__title,
.deem-c2__band-title,
.deem-shop__band-title,
.deem-pdp__title,
.deem-ph2__title,
.deem-pf__title,
.deem-statement__text,
.deem-shopitem__title,
.deem-step__title,
.deem-legalhead__title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.1;
  text-wrap: balance;
  /* Dawn zet word-break op break-word voor de hele pagina. Bij lopende tekst
     is dat nuttig, bij een kop van 50px niet: dan breekt CHOCOLATERIE af als
     CHOCOLAT / ERIE terwijl er een regel lager ruimte zat.

     word-break: normal zegt "breek niet zomaar middenin een woord".
     overflow-wrap: break-word zegt "maar als een woord echt op geen enkele
     regel past, breek het dan alsnog". Zonder dat tweede loopt een lange
     collectienaam op een telefoon buiten het scherm en kun je de pagina
     zijwaarts slepen. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Dawn gebruikt h1 en h2 niet alleen voor koppen. Het aantal producten boven
   het raster, de titels in het filterpaneel en de koppen die alleen voor een
   schermlezer bestaan zijn ook h2. Die als displaykop opmaken maakt ze in
   hoofdletters en gewicht 800 veel breder dan hun kolom: op een telefoon liep
   "9 producten" daardoor het scherm uit. Dawn markeert deze zelf met
   text-body of caption-large, en dat is precies de haak die we nodig hebben. */
h1.text-body, h2.text-body,
h1.caption-large, h2.caption-large,
.product-count__text,
.facets__heading,
.facet-filters__label,
.mobile-facets__heading {
  font-weight: 600;
  font-size: 1.28rem;
  text-transform: none;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- de shop-pagina ----------
   Dawn maakt de collectienaam net zo groot als een pagina-kop. Met onze
   hoofdletters en gewicht 800 erbij werd "ALLE PRODUCTEN" op een telefoon
   55px, paste het niet, en brak het af als ALLE PRODUCTE / N. Deze maat
   loopt netjes mee met het scherm, net als de koppen elders in het thema. */
.collection-hero__title {
  font-size: clamp(3.04rem, 5.5vw, 5.44rem);
  line-height: 1.05;
}
.collection-hero__description {
  max-width: 52ch;
  font-size: 1.6rem;
  line-height: 1.6;
}
.collection-hero__inner { padding-block: clamp(3.2rem, 5vw, 5.6rem); }

/* De balk met sorteren en het aantal: dat is bijschrift, geen kop. */
.facet-filters__field,
.product-count { align-items: center; }
.facet-filters__sort { font-size: 1.44rem; }

/* Ook h3–h6 (o.a. footer-kolomtitels, FAQ-vragen) in Montserrat i.p.v. Dawn's serif.
   Alleen de font-family — gewicht/grootte/spatiëring van elk element blijven intact. */
h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* Klantquotes in de geschreven letter, voor contrast met de hoofdletters */
.deem-quote__text { font-family: var(--font-script); font-weight: 500; font-style: normal; font-size: 1.15em; letter-spacing: 0; }

/* Bold woorden in lopende tekst — Montserrat 700, in bordeaux zodat ze opvallen.
   Op donkere vlakken juist licht. Zo kan Britt woorden benadrukken via **vet** in de editor. */
.rte strong, .rte b { font-weight: 700; color: var(--deem-wine, #7e0034); }
.color-scheme-3 .rte strong, .color-scheme-3 .rte strong, .color-scheme-3 .rte b, .color-scheme-3 .rte b,
.color-scheme-3 .rte strong, .color-scheme-3 .rte b { color: var(--deem-surface, #fff3f5); }
.rte p { line-height: 1.7; }

/* Accentwoord: Montserrat cursief (zoals "ON FIRE?" op de oude site) + kleur */
/* Het accentwoord in een kop: Caveat naast de dikke hoofdletters. Die
   mengeling van twee letters is het accent — een streep eronder of een kleur
   erbij maakt het alleen maar fussy. Hij loopt niet mee in de hoofdletters,
   want geschreven kapitalen zijn onleesbaar. */
.deem-script {
  font-family: var(--font-script);
  font-weight: 600;
  font-style: normal;
  font-size: 1.22em;
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
.deem-head__title .deem-script,
.deem-feature__content .deem-head__title .deem-script { font-size: 1.06em; }
/* op donkere bordeaux vlakken moet het script-accent licht zijn */
.color-scheme-3 .deem-script, .color-scheme-3 .deem-script,
.color-scheme-3 .deem-script { color: var(--deem-blush, #ffe2ed); }

/* Editorial kicker-stijl met sterretje */
.deem-head__kicker,
.deem-hero__kicker,
.deem-proof__label {
  font-family: var(--font-body-family, 'Montserrat', sans-serif);
}

/* ---------- Knoppen: rustige, premium hover (geen glans) ---------- */
.button,
.shopify-payment-button__button--unbranded,
.shopify-payment-button__button {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  /* Nette knopmaat op de 16px-basis (Dawn zou anders te groot worden) */
  font-size: 1.472rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  min-height: 0;
  padding: 1.2rem 2.4rem;
  border-radius: 999px;
  /* Zonder dit telt de zijpadding bovenop een opgegeven breedte. Op een
     telefoon staan de knoppen op width:100%, en dan werden ze 48px breder dan
     de kolom en liepen ze het scherm uit. Met border-box valt de padding
     binnen de breedte. Zonder opgegeven breedte verandert er niets. */
  box-sizing: border-box;
}
.button:not([disabled]):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(106, 32, 45, 0.5);
}

/* ---------- Consistente merk-knoppen overal ---------- */
/* Primair = bordeaux met crème tekst; op donkere/bordeaux vlakken juist crème met bordeaux tekst */
.button--primary,
.deem-section .button--primary {
  background: var(--deem-wine, #7e0034);
  color: var(--deem-surface, #fff3f5);
  border: 0;
}
.button--primary:not([disabled]):hover { background: var(--deem-wine-deep, #3a0018); color: #fff; }
.color-scheme-3 .button--primary, .color-scheme-3 .button--primary,
.color-scheme-3 .button--primary {
  background: var(--deem-surface, #fff3f5);
  color: var(--deem-wine, #7e0034);
}
.color-scheme-3 .button--primary:not([disabled]):hover, .color-scheme-3 .button--primary:not([disabled]):hover,
.color-scheme-3 .button--primary:not([disabled]):hover { background: #fff; color: var(--deem-wine, #7e0034); }

/* Secundair = outline in de tekstkleur van het vlak */
.button--secondary {
  background: transparent;
  border: 1.5px solid var(--deem-wine, #7e0034);
  color: var(--deem-wine, #7e0034);
}
.button--secondary:not([disabled]):hover { background: rgba(106,32,45,0.08); }
.color-scheme-3 .button--secondary, .color-scheme-3 .button--secondary,
.color-scheme-3 .button--secondary {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.color-scheme-3 .button--secondary:not([disabled]):hover, .color-scheme-3 .button--secondary:not([disabled]):hover,
.color-scheme-3 .button--secondary:not([disabled]):hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); }

/* ---------- Filmkorrel-overlay op donkere bordeaux vlakken ---------- */
.color-scheme-3 , .color-scheme-3 {
  position: relative;
  isolation: isolate;
}
.color-scheme-3::before , .color-scheme-3::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Langzaam draaiende gradient-gloed, bruikbaar als sfeer-achtergrond */
.deem-glow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.deem-glow::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 80vw;
  height: 80vw;
  top: -30%;
  right: -20%;
  background: radial-gradient(circle at center, rgba(167, 155, 143, 0.35), transparent 60%);
  filter: blur(40px);
}
@keyframes deem-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Glas-kaartjes (frosted) ---------- */
.deem-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--deem-radius);
  box-shadow: 0 18px 40px -24px rgba(31, 27, 26, 0.45);
}

/* Fijn stippenraster als rustige textuur */
.deem-dots {
  background-image: radial-gradient(rgba(31, 27, 26, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Zachtere, warmere kaartschaduw die past bij de huisstijl */
.card-wrapper .card,
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Toegankelijke, zichtbare focus in de merkkleur */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--deem-wine);
  outline-offset: 2px;
  border-radius: 4px;
}
.color-scheme-3 a:focus-visible, .color-scheme-3 a:focus-visible,
.color-scheme-3 button:focus-visible , .color-scheme-3 button:focus-visible {
  outline-color: var(--deem-surface);
}

/* Sticky header iets verfijnen */
.header-wrapper {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- Scroll-reveal ----------

   Belangrijk: het verbergen hangt aan .deem-js op het html-element, en die
   klasse wordt door een regeltje in de <head> gezet.

   Waarom: hiervoor stond .deem-reveal zelf op opacity 0, en werd de inhoud
   pas zichtbaar zodra deem.js er is-in op zette. Ging er iets mis met dat
   script, door een app van de winkel, een blokkade of gewoon een fout
   verderop, dan bleef de hele pagina leeg. De 404-pagina gebruikt deze
   klasse niet en was daarom wel te zien: precies het verschil dat we in de
   winkel zagen.

   Nu is het andersom. Zonder javascript staat alles gewoon zichtbaar en is
   er alleen geen animatie. Draait het script wel, dan zet het .deem-js en
   komt de inhoud netjes in beeld. Inhoud mag nooit van een script afhangen. */
.deem-js .deem-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.deem-js .deem-reveal.is-in { opacity: 1; transform: none; }
.deem-js .deem-reveal--left { transform: translateX(-32px); }
.deem-js .deem-reveal--right { transform: translateX(32px); }
.deem-js .deem-reveal--zoom { transform: scale(0.94); }

/* Op een telefoon is de kolom net zo breed als het scherm. Een blok dat 32px
   opzij begint steekt er dan uit, en de pagina laat zich zijwaarts slepen tot
   de animatie is afgelopen. Daar schuiven we omhoog in plaats van opzij. */
@media (max-width: 749px) {
  .deem-js .deem-reveal--left,
  .deem-js .deem-reveal--right { transform: translateY(28px); }
}

/* Boven de vouw (hero + paginabanner) direct tonen: geen opacity:0-reveal die
   wacht op JS, want dat vertraagt FCP/LCP. Scroll-reveal blijft voor content eronder. */
.deem-js .deem-hero .deem-reveal,
.deem-js .deem-ph2 .deem-reveal { opacity: 1; transform: none; transition: none; }

/* ---------- Typewriter-caret ---------- */
.deem-caret::after {
  content: '';
  display: inline-block;
  width: 0.06em;
  height: 1em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: -0.1em;
  animation: deem-blink 0.8s steps(1) infinite;
}
@keyframes deem-blink { 50% { opacity: 0; } }

/* ---------- Highlight achter handgeschreven woord ---------- */
.deem-highlight {
  position: relative;
  white-space: nowrap;
}
.deem-highlight::before {
  content: '';
  position: absolute;
  left: 0.02em; right: 0.02em;
  bottom: 0.01em;
  height: 0.07em;
  background: currentColor;
  opacity: 0.45;
  z-index: 1;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1) 0.2s;
}
.deem-reveal.is-in .deem-highlight::before,
.is-in.deem-highlight::before { transform: scaleX(1); }

/* ---------- Getekende onderstreping (SVG draw-on) ---------- */
.deem-draw path {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1s ease;
}
.deem-draw.is-drawn path { stroke-dashoffset: 0; }

/* ---------- Marquee-ticker ---------- */
.deem-marquee {
  overflow: hidden;
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  padding-block: 1.36rem;
  border-block: 1px solid rgba(var(--color-foreground), 0.1);
}
.deem-marquee__track {
  display: inline-flex;
  white-space: nowrap;
  gap: 4rem;
  animation: deem-marquee var(--speed, 28s) linear infinite;
}
.deem-marquee:hover .deem-marquee__track { animation-play-state: paused; }
.deem-marquee__item {
  font-weight: 800;
  font-size: clamp(1.76rem, 2.2vw, 2.72rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4rem;
}
.deem-marquee__star { color: rgba(var(--color-foreground), 0.4); }
@keyframes deem-marquee { to { transform: translateX(-50%); } }

/* Reduced motion respecteren */
@media (prefers-reduced-motion: reduce) {
  .button::after,
  .deem-glow::after,
  .deem-marquee__track { animation: none !important; }
  .deem-js .deem-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   De eigen vorm van By DEEM

   Het overgenomen thema rondde alles even veel af; dat leest als een sjabloon
   en het is niet van ons. Hier krijgt elk fotovak en elk kaartje bovenaan een
   ruime ronding en onderaan een strakke hoek: de vorm van een vitrinekast.
   Eén ingreep, overal doorgevoerd, en de site is niet meer met het bronthema
   te verwarren.
   -------------------------------------------------------------------------- */

:root {
  --deem-vitrine: var(--deem-radius-lg, 24px) var(--deem-radius-lg, 24px) 6px 6px;
  --deem-vitrine-sm: var(--deem-radius, 16px) var(--deem-radius, 16px) 4px 4px;
}

.deem-frame,
.deem-hero__media-frame,
.deem-c2__media,
.deem-shopcard__media,
.deem-prodblok__media,
.deem-feature__media,
.deem-card,
.deem-shopitem__media,
.deem-pf__media,
.deem-team__media,
.deem-ph2__banner {
  border-radius: var(--deem-vitrine);
  overflow: hidden;
}

.deem-c5__box,
.deem-step,
.deem-faq__item,
.deem-quote,
.deem-proof__item {
  border-radius: var(--deem-vitrine-sm);
}

/* Foto's staan op een roze vlak in plaats van op grijs. Zolang de echte foto's
   nog niet geüpload zijn zie je dat het meest, maar ook daarna schemert het
   randje mee bij foto's met een lichte achtergrond. */
.deem-frame,
.deem-feature__media,
.deem-c2__media,
.deem-shopcard__media,
.deem-shopitem__media,
.deem-ph2__banner {
  background: var(--deem-blush, #ffe2ed);
}

/* Hier stond een gouden streepje onder elke sectiekop. Samen met de
   bovenregel erboven maakte dat van elke kop hetzelfde kunstje, en zo leest
   het als opvulling in plaats van als ontwerp. Weg. Goud blijft in de kleine
   dingen: het telbolletje bij het mandje, en het schema dat je zelf kiest. */
.deem-hero__kicker::after { margin-inline: 0; }

/* Knoppen: bordeaux, en goud als je erover gaat. Daarmee zit de huisstijl ook
   in de handeling zelf en niet alleen in de vlakken. */
.button--primary,
.deem-hd__cta {
  background: var(--deem-wine, #7e0034);
  color: #fff;
}
.button--primary:not([disabled]):hover,
.deem-hd__cta:hover {
  background: var(--deem-gold-light, #fee891);
  color: var(--deem-wine, #7e0034);
}

/* Een knop met een pijl erin zette de pijl strak tegen het woord aan, want de
   ruimte tussen tekst en icoon valt weg zodra de knop een flexvak wordt. Deze
   regel geldt voor elke knop die een tekening bevat, dus ook voor de knoppen
   die er later bij komen. */
.button:has(svg),
.button:has(.deem-ico) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.button svg,
.button .deem-ico {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}
.deem-knop-pijl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

/* Dawn legt onder elke knop nog twee vlakken: een voor de schaduw en een voor
   de rand. Allebei krijgen ze een hoek uit de thema-instellingen, en die kwam
   niet overeen met de ronde hoek van onze knoppen. Het gevolg was op elke knop
   vier losse hoekjes, alsof er een tweede vierkantje overheen lag. Ze volgen
   nu de vorm van de knop zelf, en de extra rand is weg omdat onze knoppen hun
   eigen rand al hebben. */
.button::before,
.button::after,
.shopify-challenge__button::before,
.shopify-challenge__button::after,
.customer button::before,
.customer button::after,
.shopify-payment-button__button--unbranded::before,
.shopify-payment-button__button--unbranded::after {
  border-radius: inherit;
  inset: 0;
}
.button::after,
.shopify-challenge__button::after,
.customer button::after,
.shopify-payment-button__button--unbranded::after {
  box-shadow: none;
}

/* ============================================================
   DE SHOPPAGINA

   Dawn's balk met sorteren en filteren was een rij losse onderdelen zonder
   vorm: een selectievak over de volle breedte, een kale link Alles
   verwijderen, en het aantal producten er los onder. Hij staat nu in een
   eigen strookje met dezelfde ronde vormen als de rest van het thema.
   ============================================================ */



/* De kaart van een product: dezelfde ronding en diepte als elders. */
.card-wrapper .card,
.card__inner { border-radius: 1.8rem; overflow: hidden; }
.card__heading { font-size: 1.6rem; }


}

/* Een product dat je niet online verkoopt kreeg het label Uitverkocht, en dat
   klopt niet: het ligt gewoon in de winkel. Dit label zegt wat er wel aan de
   hand is, in goud zodat het niet als een waarschuwing leest. */
.badge.deem-badge-winkel {
  background: var(--deem-gold-light, #fee891);
  color: var(--deem-wine, #7e0034);
  border-color: transparent;
  font-weight: 700;
}

/* ============================================================
   LEGE VLAKKEN DIE ER TOCH MOETEN ZIJN

   Dawn zet div:empty op display none. Dat houdt rommel uit de editor weg,
   maar onze textuur- en waasvlakken zijn met opzet leeg: die tekenen alleen
   een achtergrond over de sectie heen. Zonder deze regel bestaan ze niet,
   en dat zie je nergens terug in een foutmelding.

   Het element staat er expres voor: die telt even zwaar als div:empty en
   deze regel komt later, dus hij wint.
   ============================================================ */
div.deem-hero__grain,
div.deem-ft__grain,
div.deem-pop__waas { display: block; }