/** Shopify CDN: Minification failed

Line 422:2 Unexpected "}"
Line 429:0 Unexpected "}"
Line 1062:2 Unexpected "}"

**/
/* =========================
   TABLET (769–1024px)
   ========================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .product {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  .product * {
    box-sizing: border-box !important;
  }

  .product-gallery {
    width: 100vw;
    margin: 0 calc(-50vw + 50%);
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
  }
html, body {
  overflow-x: hidden !important;
}

  .product-gallery img {
    width: auto;
    max-width: 200px;
    height: auto;
    object-fit: contain;
  }
  h1.product-title {
    font-family: 'inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 19.8px !important;
    line-height: 23.8px !important;
    text-align: center !important;
    margin-top: -12px !important;
    margin-bottom: -4px !important;
    color: rgb(0, 0, 0) !important;
    vertical-align: baseline !important; 
  }
  .smellish-merk {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #666 !important;
    margin-top: 6px !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }
  .jdgm-preview-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    margin: 8px 0 !important;
  }

  .jdgm-preview-badge__text {
    display: block !important;
    margin-top: 4px !important;
    text-align: center !important;
  }

  .jdgm-preview-badge__stars {
    justify-content: center !important;
  }

  .product-concentration-gender {
    justify-content: center !important;
    font-size: 12.5px !important;
    text-align: center !important;
    margin-bottom: 12px;
    color: #000000 !important;
  }
  /* 0) voorkom breedte-jump door scrollbar (Windows/Chrome) */
  html { overflow-y: scroll; scrollbar-gutter: stable both-edges; }
  html, body { overflow-x: hidden; }

  /* 1) Centrale contentcontainer (één vaste breedte + gelijke padding) */
  :root {
    --tablet-max: 760px;  /* totale contentbreedte */
    --gutter: 24px;       /* linker/rechter padding binnen de container */
  }

  /* Alles wat onderdeel is van de productcontent krijgt exact dezelfde ‘rail’ */
  .product,
  .accordion-section,
  .smellish-anchor-nav,
  .product-teaser-wrapper,
  .disclaimer-section {
    width: min(100%, var(--tablet-max));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    box-sizing: border-box;
  }
  .accordion,
  .accordion > .accordion-header,
  .accordion > .accordion-content,
    .geurkalender-knop,
  .smellish-anchor-nav,
  .scent-section,
  .accordion-section { 
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .product * { box-sizing: border-box; }

  /* 2) Gallery schaalt gewoon mee in de container (geen 100vw meer) */
  .product-gallery {
    width: 100%;
    margin: 0 auto;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
  }
  .product-gallery img {
    width: auto;
    max-width: 280px;
    height: auto;
    object-fit: contain;
  }

  /* 3) CTA exact containerbreedte (en blijft dat ook bij open/dicht klappen) */
  .geurkalender-knop {
    width: 100% !important;
    height: 52.2px !important;
    font-size: 14.2px !important;
    font-weight: 500 !important;
    margin: 12px 0 !important;
    border-radius: 25px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #000 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 0 14px !important;
    position: relative !important;
  }

  /* 4) Mini teaser onder CTA */
  .product-teaser-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 16px auto !important;
    padding: 0 !important;                /* padding zit al op de container */
    max-width: 520px !important;
  }
  .product-teaser {
    font-size: 12.8px !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    color: #000 !important;
    max-width: 420px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .teaser-icon { width: 28px !important; height: auto !important; margin-top: 2px !important; flex-shrink: 0 !important; }

  /* 5) Anchor-chips (Seizoenen / Dag-Nacht / …) – 2 per rij, zelfde binnenmarge */
  .smellish-anchor-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    padding-top: 20px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }
  .smellish-anchor-nav a {
    text-align: center !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    padding: 10px 0 !important;
    border-radius: 9999px !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
  }
  .smellish-anchor-nav a:hover,
  .smellish-anchor-nav a.active { background:#333 !important; }

  /* 6) Accordeons — VASTE breedte + gelijke padding (ook wanneer open) */
  .accordion-section { 
    margin-top: 18px !important;
 }
  

  .accordion {
    width: 100% !important;                 /* = containerbreed */
    border-top: 1px solid #e0e0e0 !important;
    padding: 16px 0 !important;             /* géén extra side-padding hier */
    cursor: pointer !important;
  }
  .accordion-header {
    position: relative !important;
    font-family: 'Inter', sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: .5px !important;
    padding-right: 30px !important;         /* ruimte voor caret */
    color: #000 !important;
  }
  .accordion-icon {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    background: url("data:image/svg+xml;utf8,<svg fill='black' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat center !important;
    background-size: contain !important;
    transition: transform .3s ease !important;
  }
  .accordion.open .accordion-icon { transform: translateY(-50%) rotate(180deg) !important; }

  .accordion-content {
    display: none !important;
    padding-top: 12px !important;
    margin-top: 8px !important;
    padding-left: 0 !important;
    list-style: none !important;
    font-size: 13.5px !important;
    color: #333 !important;
    font-family: 'Inter', sans-serif !important;
    /* BELANGRIJK: hou dezelfde ‘rail’ als de header */
    width: 100% !important;
  }
  .accordion.open .accordion-content { display: block !important; }

  .accordion-content ul { padding: 0 !important; margin: 0 !important; }
  .accordion-content li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    line-height: 1.5;
    font-size: 13.5px;
    margin-bottom: 14px;
  }
  .accordion-content li strong {
    font-weight: 600 !important;
    color: #111 !important;
    letter-spacing: .2px !important;
    font-size: 13.2px !important;
    margin-right: 2px;
    flex-shrink: 0;
    white-space: nowrap;
    max-width: 33%;
  }
  .accordion-content li a {
    background: #f2f2f2;
    padding: 4px 9px;
    border-radius: 14px;
    font-size: 12.8px;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 1;
  }
  .accordion-content li a:hover { background: #e8e8e8; }
  .accordion-content li a + a { margin-left: 4px; }
  .accordion-content li span { font-size: 13px; color:#333; line-height:1.4; }
  .accordion-content li:last-child span { font-size: 12.5px; }

  /* 7) Tooltip bij (i) in headers – iets ruimer op tablet */
  .info-icon::after {
    bottom: 140% !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    width: 280px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.2) !important;
  }


/* ------------------------------ GEURNOTEN KLEUREN ------------------------------ */
.scent-section {
  align-items: start !important;
  padding: 25px 0 !important;
  font-family: 'Open sans', serif !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.note-category {
  margin-bottom: 25px !important;
}

.note-title {
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

.note-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.note-item {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 138px !important;
  height: 40px !important;
  border-radius: 25px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: #333 !important;
  padding: 6px 12px !important;
}
/* hovertip css */
  /* Tooltip-overlay */
  .tooltip-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    background-color: #1a1a1a;
    color: #fff;
    padding: 24px 24px;
    border-radius: 14px;
    max-width: 80vw;
    min-width: 260px;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    text-align: left;
  }

  .tooltip-modal:not(.hidden) {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .tooltip-modal.hidden {
    display: none;
  }

  .tooltip-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tooltip-content p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 16px;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    text-align: left;
  }

  #tooltip-close {
    background-color: #fff;
    color: #1a1a1a;
    padding: 6px 14px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    align-self: center;
  }

  /* Actieve geurnoot stijl */
  .tooltip-note.tooltip-active {
    border: 2px solid #1a1a1a;
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  /* Verberg standaard hover-tooltips op mobiel */
  .tooltip-note::after,
  .tooltip-note .mobile-tooltip {
    display: none !important;
  }
}


  /* Verberg hover-tooltips op mobiel */
  .tooltip-note::after,
  .tooltip-note .mobile-tooltip {
    display: none !important;
  }
  }

  /* Zorg dat bestaande hover-tooltips niet storen op mobiel */
  .tooltip-note::after,
  .tooltip-note .mobile-tooltip {
    display: none !important;
  }
}
/* Kleuren */
.note-roze-peper {
  background-color: #f4b6c2 !important;
  color: #fff !important;
}

.note-grapefruit {
  background-color: #ffcc99 !important;
  color: #000 !important;
}

.note-bergamot {
  background-color: #cdeab0 !important;
  color: #000 !important;
}

.note-gember {
  background-color: #f0b478 !important;
  color: #000 !important;
}

.note-salie {
  background-color: #c3d7c0 !important;
  color: #000 !important;
}

.note-lavendel {
  background-color: #dbc4e8 !important;
  color: #000 !important;
}

.note-suede {
  background-color: #cab8a2 !important;
  color: #000 !important;
}

.note-mos {
  background-color: #98c99c !important;
  color: #000 !important;
}

.note-helder-hout {
  background-color: #e4c59e !important;
  color: #000 !important;
}
  .note-mango {
  background-color: #ffd36e !important; /* zonnig geel/oranje */
  color: #000 !important;
}

.note-jasmijn {
  background-color: #fff0f5 !important; /* zacht bloemig witroze */
  color: #000 !important;
}

.note-kerkwierook {
  background-color: #d2c2aa !important; /* mystiek beige/grijs */
  color: #000 !important;
}

.note-vanille {
  background-color: #fbe7c6 !important; /* romig vanillebeige */
  color: #000 !important;
}

.note-sandelhout {
  background-color: #deb887 !important; /* warm houtbruin */
  color: #000 !important;
}
  .note-bloed-mandarijn {
  background-color: #ffb3a7 !important; /* warm mandarijnroze */
  color: #000 !important;
}

.note-munt {
  background-color: #b9eacb !important; /* frisse muntgroen */
  color: #000 !important;
}

.note-kaneel {
  background-color: #d2691e !important; /* kaneelbruin */
  color: #fff !important;
}

.note-kruidige-geurnoten {
  background-color: #e3b778 !important; /* warme kruidige tint */
  color: #000 !important;
}

.note-roos {
  background-color: #f4c2c2 !important; /* zachte rozenroze */
  color: #000 !important;
}

.note-amber {
  background-color: #ffc87c !important; /* amberkleur */
  color: #000 !important;
}

.note-leer {
  background-color: #a67c52 !important; /* leerbruin */
  color: #fff !important;
}

.note-hout-noten {
  background-color: #deb887 !important; /* klassiek houtbruin */
  color: #000 !important;
}

.note-indiase-patchouli {
  background-color: #b2a49b !important; /* aardse patchoulikleur */
  color: #000 !important;
}
  .note-rood-fruit {
  background-color: #f28b82 !important; /* fris rood fruit */
  color: #000 !important;
}

.note-rabarber {
  background-color: #e0a899 !important; /* roze/beige zuurzoet */
  color: #000 !important;
}

.note-mandarijn {
  background-color: #ffcc80 !important; /* helder oranjegeel */
  color: #000 !important;
}

.note-muskus {
  background-color: #e8e6e1 !important; /* lichtgrijs/beige muskus */
  color: #000 !important;
}

.note-ambroxan {
  background-color: #dcd6c3 !important; /* synthetisch amberachtig */
  color: #000 !important;
}

.note-ceder {
  background-color: #c8b89a !important; /* zacht houtachtig beige */
  color: #000 !important;
}

.note-patchouli {
  background-color: #bfa6a0 !important; /* aards bruinpaars */
  color: #000 !important;
}
.note-appel {
  background-color: #f1f1f1 !important; /* neutraal lichtgrijs voor Appel */
  color: #000 !important;
}

.note-kaneel {
  background-color: #d2691e !important; /* warm kaneeloranje */
  color: #fff !important;
}

.note-lavendel {
  background-color: #d9c2e9 !important; /* lavendelpaars */
  color: #000 !important;
}

.note-bergamot {
  background-color: #cdeab0 !important; /* zachtgroen citrus */
  color: #000 !important;
}

.note-oranje-bloesem {
  background-color: #fdeacb !important; /* zacht oranje/witbloesemkleurig */
  color: #000 !important;
}

.note-lelietje-van-dalen {
  background-color: #e6f2da !important; /* lichtgroen bloemig */
  color: #000 !important;
}


.note-vanille {
  background-color: #fbe9c6 !important; /* romig vanillebeige */
  color: #000 !important;
}

.note-tonkaboon {
  background-color: #ddd0c0 !important; /* lichtbruin, nootachtig */
  color: #000 !important;
}

.note-amber {
  background-color: #fbc987 !important; /* warm amberkleurig */
  color: #000 !important;
}
.note-bramen {
  background-color: #b285a5 !important; /* donker bessenpaars */
  color: #fff !important;
}

.note-peer {
  background-color: #e3f6c4 !important; /* zachtgroen, sappig fruit */
  color: #000 !important;
}
.note-slagroom {
  background-color: #fff4ea !important; /* romig wit */
  color: #000 !important;
}

.note-marshmellow {
  background-color: #fdeaf1 !important; /* zacht roze/snoepkleur */
  color: #000 !important;
}

.note-zwarte-bes {
  background-color: #6f3b74 !important; /* diep paars */
  color: #fff !important;
}

.note-jasmijn {
  background-color: #ffeef1 !important; /* lichtbloemig roze */
  color: #000 !important;
}

.note-plumeria {
  background-color: #fce5d1 !important; /* zacht perzikachtig bloemig */
  color: #000 !important;
}

.note-kamperfoelie {
  background-color: #f3fdd4 !important; /* geelgroen bloemig */
  color: #000 !important;
}
.note-kasjmier-hout {
  background-color: #d9cfc2 !important; /* warm beige houtachtig */
  color: #000 !important;
}
.note-lychees {
  background-color: #ffe5ec !important; /* fris lichtroze fruit */
  color: #000 !important;
}

.note-framboos {
  background-color: #f4b6c2 !important; /* helder framboosroze */
  color: #000 !important;
}

.note-meloen {
  background-color: #fef3d3 !important; /* zachtgeelgroen meloen */
  color: #000 !important;
}

.note-guave {
  background-color: #ffe1d6 !important; /* guave-oranje/roze pastel */
  color: #000 !important;
}
.note-waterlelie {
  background-color: #e5f5f7 !important; /* lichtblauw aquatisch bloemig */
  color: #000 !important;
}

.note-passiebloem {
  background-color: #e6d5f3 !important; /* licht violetbloemig */
  color: #000 !important;
}

.note-pioenroos {
  background-color: #fde3f3 !important; /* zacht roze bloemig */
  color: #000 !important;
}
.note-rozenhout {
  background-color: #e6cfc7 !important; /* zacht houtachtig roze/beige */
  color: #000 !important;
}
.note-koriander {
  background-color: #e0d4c2 !important; /* kruidig lichtbeige */
  color: #000 !important;
}

.note-mandarijn {
  background-color: #ffc56b !important; /* helder oranjegeel citrus */
  color: #000 !important;
}

.note-grapefruit {
  background-color: #ffcc99 !important; /* pastel perzikkleur */
  color: #000 !important;
}

.note-limoen {
  background-color: #d2f4b7 !important; /* lichtgroen citrus */
  color: #000 !important;
}
.note-mirre {
  background-color: #dbc5a3 !important; /* harsachtig beige-bruin */
  color: #000 !important;
}

.note-nootmuskaat {
  background-color: #e8d4b0 !important; /* kruidig warmbeige */
  color: #000 !important;
}

.note-anjer {
  background-color: #f9e0e0 !important; /* bloemig roze */
  color: #000 !important;
}

.note-denneboom {
  background-color: #c3d4bb !important; /* dennenachtig groen/grijs */
  color: #000 !important;
}

.note-rode-bessen {
  background-color: #de6b74 !important; /* helder rood/roze beskleur */
  color: #fff !important;
}
.note-vetiver {
  background-color: #b3a98f !important; /* aards olijfgroen/bruin */
  color: #000 !important;
}
.note-sinaasappel {
  background-color: #ffe4b5 !important; /* licht sinaasappelbeige */
  color: #000 !important;
}

.note-bloedgrapefruit {
  background-color: #f9c5b9 !important; /* roze/grapefruit pastel */
  color: #000 !important;
}

.note-indiase-mandarijn {
  background-color: #ffd89f !important; /* warm oranjegeel */
  color: #000 !important;
}

.note-pruim {
  background-color: #c29fc6 !important; /* zacht pruimpaars */
  color: #000 !important;
}

.note-groene-noten {
  background-color: #cde8b2 !important; /* frisgroen blad */
  color: #000 !important;
}

.note-viooltje {
  background-color: #e4cdf9 !important; /* lila bloemkleur */
  color: #000 !important;
}

.note-viooltjesblad {
  background-color: #cbe2c4 !important; /* groenbladig bloemig */
  color: #000 !important;
}

.note-tuberoos {
  background-color: #fef0e3 !important; /* romig witbloemig */
  color: #000 !important;
}
.note-fresia {
  background-color: #ffeef5 !important; /* zachtbloemig roze */
  color: #000 !important;
}

.note-orchidee {
  background-color: #f3d1ec !important; /* licht orchideeroze */
  color: #000 !important;
}

.note-sering {
  background-color: #e6d7f0 !important; /* zacht lila bloemig */
  color: #000 !important;
}

.note-lelie {
  background-color: #fff5e9 !important; /* licht warm crème */
  color: #000 !important;
}

.note-geranium {
  background-color: #f0b6b3 !important; /* roze-rood bloemig */
  color: #000 !important;
}

.note-karo-karounde {
  background-color: #d4c4a8 !important; /* exotisch bloemig beige */
  color: #000 !important;
}
.note-mimosa {
  background-color: #fef1b6 !important; /* zachtgeel bloemig */
  color: #000 !important;
}

.note-magnolia {
  background-color: #ffe9f0 !important; /* bloesem roze/wit */
  color: #000 !important;
}

.note-ceder {
  background-color: #c8b89a !important; /* zacht houtachtig beige */
  color: #000 !important;
}
.note-gojibessen {
  background-color: #f4a6a0 !important; /* rood fruit, fris en sappig */
  color: #000 !important;
}

.note-kweepeer {
  background-color: #fef1c1 !important; /* zachtgeel fruitig */
  color: #000 !important;
}

.note-vanille-orchidee {
  background-color: #f7eada !important; /* bloemig romig beige */
  color: #000 !important;
}

.note-roze-pioen {
  background-color: #f9d1dc !important; /* romantisch roze bloemig */
  color: #000 !important;
}

.note-osmanthus {
  background-color: #ffe3b0 !important; /* abrikoosachtig bloemig geel */
  color: #000 !important;
}

.note-hibiscus {
  background-color: #f4b3b3 !important; /* tropisch roze/rood bloemig */
  color: #000 !important;
}
.note-citroen {
  background-color: #fff9c4 !important; /* lichtgele citrustint */
  color: #000 !important;
}

.note-eikenmos {
  background-color: #b5c19a !important; /* aards groengrijs mos */
  color: #000 !important;
}

.note-mahoniehout {
  background-color: #d8b6a1 !important; /* warm roodbruin hout */
  color: #000 !important;
}

.note-cederhout {
  background-color: #c8b89a !important; /* houtachtig beige */
  color: #000 !important;
}

.note-olijfboom {
  background-color: #d4cdb0 !important; /* zacht olijfgroen/beige hout */
  color: #000 !important;
}
  .note-maninka {
  background-color: #f3dbbb !important; /* fruitig/beige met tropische vibe */
  color: #000 !important;
}
  .note-fruitige-noten {
  background-color: #ffe7b7 !important; /* fris geel-oranje fruitig */
  color: #000 !important;
}

.note-afrikaanse-oranjebloesem {
  background-color: #fff1cc !important; /* zachtgeel bloemig citrus */
  color: #000 !important;
}

.note-amalfi-citroen {
  background-color: #fafdcb !important; /* heldergeel citrus */
  color: #000 !important;
}

.note-cassis {
  background-color: #7f4c6b !important; /* donkerpaars bessentint */
  color: #fff !important;
}
.note-ylang-ylang {
  background-color: #fff8c9 !important; /* lichtgeel bloemig tropisch */
  color: #000 !important;
}

.note-heliotroop {
  background-color: #e6d6f0 !important; /* lila/pastel paars bloemig */
  color: #000 !important;
}

.note-iriswortel {
  background-color: #dcd0e8 !important; /* koel paarsgrijs poederachtig */
  color: #000 !important;
}
.note-benzoine {
  background-color: #f1e0c5 !important; /* warm beige/amberhars */
  color: #000 !important;
}

.note-styrax {
  background-color: #d3b8a4 !important; /* warme harsachtig bruinbeige */
  color: #000 !important;
}

.note-tabaksblad {
  background-color: #a4805d !important; /* donker tabaksbruin */
  color: #fff !important;
}
.note-zeenoten {
  background-color: #c9e4f3 !important; /* fris aqua/blauwgrijs */
  color: #000 !important;
}
.note-laurierblad {
  background-color: #d6e8c5 !important; /* groen kruidig blad */
  color: #000 !important;
}
.note-ambergris {
  background-color: #dad8d0 !important; /* zilvergrijs/zeewaterachtig */
  color: #000 !important;
}

.note-guaiac-hout {
  background-color: #bfaea0 !important; /* warm houtachtig grijsbruin */
  color: #000 !important;
}

.note-eikenmos {
  background-color: #aab98b !important; /* aards mosgroen */
  color: #000 !important;
}
.note-roze-grapefruit {
  background-color: #ffd3c6 !important; /* zachtroze citruskleur */
  color: #000 !important;
}

.note-siciliaanse-bergamot {
  background-color: #d7f4b7 !important; /* frisser citrusgroen dan gewone bergamot */
  color: #000 !important;
}

.note-hyacint {
  background-color: #e0d4f7 !important; /* paars/lavendelkleurig bloemig */
  color: #000 !important;
}
.note-patchouli-uit-singapore {
  background-color: #b8a79f !important; /* iets lichtere aardse patchouli */
  color: #000 !important;
}

.note-civet {
  background-color: #c4b9ac !important; /* dierlijk, zachtgrijs-bruin */
  color: #000 !important;
}
.note-zwart-viooltje {
  background-color: #8b5c85 !important; /* diep paarsachtig violet */
  color: #fff !important;
}

.note-saffraan {
  background-color: #f6c47e !important; /* warm goudgeel kruidig */
  color: #000 !important;
}
.note-honing {
  background-color: #fbe5a2 !important; /* honinggeel zacht goud */
  color: #000 !important;
}
  .note-chinotto {
  background-color: #e0c3a5 !important; /* bitterzoet citrus-bruin */
  color: #000 !important;
}

.note-madagascar-peper {
  background-color: #d7a17c !important; /* warm peperachtig oranje-bruin */
  color: #000 !important;
}

.note-rozemarijn {
  background-color: #b7d1b0 !important; /* groen kruidig */
  color: #000 !important;
}
.note-pepperwood {
  background-color: #cfb5a3 !important; /* houtachtig roze/bruin tint */
  color: #000 !important;
}
.note-calabrische-bergamot {
  background-color: #d4edb0 !important; /* frisgroen citrus */
  color: #000 !important;
}

.note-waternoten {
  background-color: #c8e4f0 !important; /* zacht aqua blauw */
  color: #000 !important;
}

.note-vijgenblad {
  background-color: #b6d4a8 !important; /* fruitig groen blad */
  color: #000 !important;
}
.note-zwarte-peper {
  background-color: #c1b4a9 !important; /* warm kruidig grijs/beige */
  color: #000 !important;
}

.note-papyrus {
  background-color: #e2d7c3 !important; /* houtachtig beige */
  color: #000 !important;
}
.note-wierook {
  background-color: #b6a99c !important; /* rookachtig grijsbruin */
  color: #000 !important;
}

  /* ------------------------------ HOOFDAKKOORDEN ------------------------------ */
.accords-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.accord-item {
  font-size: 13px !important;
  padding: 6px 12px !important;
  background-color: #f0f0f0 !important;
  color: #222 !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
  text-transform: lowercase !important;
  font-family: 'Open Sans', sans-serif !important;
}
  .smellish-daynight-wrapper,
  .scent-bar-group,
  .houdbaarheid-wrapper,
  .sillage-wrapper,
  .disclaimer-section,
  .transparantie-wrapper
  }
  .smellish-anchor-nav {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 20px 16px 24px 16px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin-top: -8px !important;
    margin-bottom: 24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .smellish-anchor-nav a {
    flex: 1 1 45% !important;
    min-width: 100px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 12.5px !important;              /* ✅ kleiner font */
    padding: 8px 0 !important;                 /* ✅ iets minder padding */
    border-radius: 9999px !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .smellish-anchor-nav a:hover,
  .smellish-anchor-nav a.active {
    background: #333 !important;
    color: #fff !important;
  }

  .smellish-anchor-nav a:active {
    transform: scale(0.98) !important;
  }

  .anchor-intro-text {
    font-size: 12.5px !important;             /* ✅ kleiner font intro */
    color: #1a1a1a !important;
    text-align: center !important;
    margin-bottom: 0px !important;
    margin-top: -24px !important;
    padding: 0 24px !important;
    font-family: 'Inter', sans-serif !important;
  }
  .seizoenen-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important; /* Iets minder ruimte tussen seizoensitems */
    margin: 16px 16px 0 16px !important; /* Minder marge boven */
  }

  .seizoenen-item {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #e0e0e0 !important;
     width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .seizoen-icon {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 4px !important;
  }

  .seizoen-label {
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 2px 0 6px 0 !important;
  }

  .seizoen-bar-wrapper {
    background: #eee !important;
    height: 8px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    max-width: 400px !important;
    width: 100% !important;
  }

  .seizoen-bar {
    height: 8px !important;
    background: #000 !important;
  }

  .tooltip {
    font-size: 12px !important;
    color: #666 !important;
    margin-top: 10px !important; /* Meer afstand onder de bar */
    max-width: 260px !important;
  }

  /* Zelfde breedte + centreren voor alle onderdelen */
  .smellish-daynight-wrapper,
  .scent-bar-group {
    max-width: 600px;                 /* dezelfde contentbreedte */
    margin: 24px auto !important;     /* center + consistente marge */
  }

  /* ------ Day/Night (kleuren/typografie blijven gelijk) ------ */
  .smellish-daynight-wrapper {
    text-align: center !important;
    padding: 0 8px 16px !important;   /* 8px side padding → zelfde optische breedte als .scent-bar-wrapper */
    border-bottom: 1px solid #e0e0e0; /* scheidingslijn boven Houdbaarheid */
  }

  .smellish-daynight-bar {
    display: flex !important;
    height: 30px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
    background: #f0f0f0 !important;   /* ongewijzigd */
  }
  .smellish-day-bar,
  .smellish-night-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 8px !important;        /* match met de 8px sides */
  }
  .smellish-day-bar  { background: #ffec88 !important; color: #000 !important; }
  .smellish-night-bar{ background: #1a1a1a !important; color: #fff !important; }
  .daynight-icon     { width: 16px !important; margin-right: 6px !important; }
  .daynight-hint     { font-size: 13px !important; color: #555 !important; font-style: italic !important; margin-top: 4px !important; margin-bottom: 20px !important; }

  /* ------ Geur-balken (kleuren/typografie/tooltip look blijven gelijk) ------ */
  .scent-bar-group {
    padding: 0 0 16px 0 !important;   /* ruimte vóór eventuele scheidslijn */
  }

  /* scheidingslijn TUSSEN Houdbaarheid en Sillage, niet onder de laatste */
  .scent-bar-group:not(:last-of-type) {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px !important;
  }
.geurinfo-blok {
     margin-bottom: 20px !important;
    margin-top: 20px !important;
}
  .scent-labels { display: none !important; } /* desktop labels uit op mobiel */

  .scent-label-title {
    font-weight: 600 !important;
    font-size: 15px !important;
    text-align: left !important;
    padding: 0 8px !important;
    margin: 0 0 6px !important;
  }

  .scent-bar-wrapper {
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding: 0 8px !important;        /* zelfde side padding als Day/Night → balken exact even breed */
  }

  .bar  { height: 8px !important; background: #eee !important; border-radius: 4px !important; overflow: hidden !important; width: 100% !important; }
  .fill { height: 8px !important; background: #000 !important; }

  .mobile-scent-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 8px !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    color: #333 !important;
  }
/* =========================
   MOBIEL (≤768px)
   ========================= */

  /* Zelfde breedte + centreren voor geurblokken */
  .scent-bar-group {
    margin: 24px auto !important;
    padding: 0 0 16px 0 !important;
  }

  /* Titel + i-icoon naast elkaar (blijven zichtbaar) */
  .scent-label-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin: 0 0 6px !important;
    padding: 0 8px !important;
  }
  /* mini pixel-push zodat het icoon optisch perfect naast de tekst staat */
  .scent-label-title .info-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
    vertical-align: middle !important;
    transform: translateY(-5px) !important;; /* optische correctie */
  }
  /* Balk + vulling (ongewijzigde kleuren) */
  .scent-bar-wrapper {
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding: 0 8px !important; /* zelfde side padding als labels */
  }
  .bar  { height: 8px !important; background: #eee !important; border-radius: 4px !important; overflow: hidden !important; width: 100% !important; }
  .fill { height: 8px !important; background: #000 !important; }

  /* Desktop-labels uit */
  .scent-labels { display: none !important; }

  /* Mobiele labels exact onder de balk: links / midden / rechts */
  .mobile-scent-labels {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    padding: 0 8px !important;   /* zelfde side padding als .scent-bar-wrapper */
    margin-top: 6px !important;
    font-size: 13px !important;
    color: #333 !important;
  }
  .mobile-scent-label {
    display: flex !important;
    width: 100% !important;
  }
  .mobile-scent-label:nth-child(1) { justify-content: flex-start !important; }
  .mobile-scent-label:nth-child(2) { justify-content: center !important; }
  .mobile-scent-label:nth-child(3) { justify-content: flex-end !important; }

  /* ====== Tooltips (mobiel) ====== */

  /* Trigger */
  .mobile-scent-label .tooltip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
  }
  .tooltip { position: relative !important; }

  /* Ballon: zelfde look, nooit off-screen, en geen display-toggling meer */
  .tooltiptext {
    display: block !important;              /* niet meer none/block */
    position: absolute !important;
    bottom: 125% !important;

    /* look behoud */
    background: #000 !important;
    color: #fff !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
    z-index: 99 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 140px !important;
    min-width: 140px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;

    /* verbergen/tonen via visibility → geen klik-glitches */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease !important;
  }

  /* Open state via .is-open (uit je JS) */
  .toggle-tooltip.is-open .tooltiptext {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Houd ballon binnen viewport per kolom */
  .mobile-scent-label:nth-child(1) .tooltiptext {
    left: 0 !important;
    transform: none !important;
  }
  .mobile-scent-label:nth-child(2) .tooltiptext {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .mobile-scent-label:nth-child(3) .tooltiptext {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  /* (optioneel) subtiele scheidslijn tussen Houdbaarheid en Sillage */
  .scent-bar-group:not(:last-of-type) {
    border-bottom: 1px solid #e0e0e0 !important;
  }

/* Globaal laten staan zoals je had */
.info-icon { stroke: #666; flex-shrink: 0; }
body { overflow-x: hidden !important; }

  .disclaimer-section {
    padding: 10p !important;
    margin: 32px 16px;
    font-size: 5px;
    color: #777;
    line-height: 1.6;
  }

  .disclaimer-header {
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    margin-bottom: 10px;
  }


  .disclaimer-body {
    display: block;
    font-size: 5px;
    color: #999;
    text-align: justify;
  }