/* Botanical Wisdom — demo of ideas. Local demo only, not their site.
   html.bwd-on = any version with ideas · html[data-bwd-v="a"] / html[data-bwd-v="b"] = the chosen version.
   The language pop-up is skipped by a cookie in index-demo.html — never hide it with CSS (it locks scrolling). */

:root {
  --bwd-olive: rgb(110, 116, 93);
  --bwd-ink: rgb(41, 45, 39);
  --bwd-cream: rgb(248, 243, 239);
  --bwd-line: rgba(110, 116, 93, 0.22);
  --bwd-ease: cubic-bezier(.2, .65, .25, 1);
  --bwd-ease-reveal: cubic-bezier(.77, 0, .18, 1);
}
.bwd-zoomframe, .bwd-parallax, .bwd-unveil { display: block; line-height: 0; overflow: hidden; }

/* ═══ Shared by A and B ════════════════════════════════════════════════════════════════════ */

/* The pinned header gets slimmer: logo 104 → 72 px (lettering stays readable), equal space above the logo and
   below the menu. Keyed on Divi's own pinned class — no script. Transitions only on the pinned state: shrinking
   animates, un-pinning snaps back in the same instant Divi's full-height stand-in disappears (no jump). */
html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top {
  padding-top: 10px !important; padding-bottom: 10px !important;
  box-shadow: 0 6px 24px rgba(41, 45, 39, .08);
  transition: padding .5s var(--bwd-ease), box-shadow .5s;
}
html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top :is(.et_pb_row, .et_pb_module) {
  padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
  transition: padding .5s var(--bwd-ease), margin .5s var(--bwd-ease);
}
/* Full state: logo 80 → 104 px (Vingel 2026-10-30: "enlarge the full state so the shrunk state can be bigger") */
html.bwd-on .et_pb_section_1_tb_header .et_pb_menu__logo img { width: 104px !important; height: auto !important; max-width: none !important; max-height: none !important; }
/* only the WIDTH is set, height follows the logo's own shape. Divi enforces its own logo height, so setting width+height
   gave 104 × 80 — stretched (Vingel 2026-10-30: "not the right aspect ratio"). */
/* pinned 72 → 86 px (Vingel 2026-10-31: "the smaller version is too light or just too small" — option 4) */
html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top img {
  width: 86px !important; height: auto !important;
  transition: width .5s var(--bwd-ease);
}
html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top .et_pb_menu__logo-wrap { margin-top: 5px !important; margin-bottom: 2px !important; transition: margin .5s var(--bwd-ease); }
/* (section padding-top is held by Divi while pinned — the logo margin above is what actually moves it) */
html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top .et-menu > li > a {
  padding-top: 10px !important; padding-bottom: 6px !important;
  transition: padding .5s var(--bwd-ease);
}
/* Full state: less empty band under the menu (Vingel marked it 2026-10-30) — link padding-bottom 31 → 16 px.
   Also applies to Divi's invisible stand-in (same classes), so pinning never jumps. */
html.bwd-on .et_pb_section_1_tb_header:not(.et_pb_sticky--top) .et-menu > li > a { padding-bottom: 16px !important; }

/* Keep the dropdown arrows (Shop, Huidverzorgingsroutine) and the cart level with the menu words — also WHILE the header
   pins and unpins. Divi centres both in the link's box; since the band under the menu was trimmed (31 → 16 px, 6 px when
   pinned) the words sit below that centre. v25 fixed the end states with a fixed top, but the words slide (.4–.5 s) and a
   fixed top jumps, so during the slide arrows were up to 21 px off (Vingel 2026-10-30: "icons still act weird when scrolling").
   Now: the arrow rides on the word's own line (static flex item + a fixed 7 px drop, same spot as on their site, same link
   width), and the cart gets padding with the SAME slide as the links, so they move together. Desktop only. */
@media (min-width: 981px) {
  html.bwd-on .et_pb_section_1_tb_header .et-menu > li > a::after {
    position: relative !important; top: 7px !important; right: auto !important; margin: 0 -20px 0 4px !important;
  }
  html.bwd-on .et_pb_section_1_tb_header:not(.et_pb_sticky--top) .et_pb_menu__cart-button {
    padding-top: 15px !important; transition: padding .4s ease-in-out;
  }
  html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top .et_pb_menu__cart-button {
    padding-top: 4px !important; transition: padding .5s var(--bwd-ease);
  }
}

/* Centre the menu links under the logo: the cart (81 px) hangs on the right, so give the row an invisible
   counterweight on the left — 103 px = cart 81 + the gap, measured so the TEXT "Home … Contact" centres on the logo. Both states, so nothing slides sideways when the header pins. Desktop only. */
@media (min-width: 981px) {
  html.bwd-on .et_pb_section_1_tb_header .et_pb_menu__wrap::before { content: ""; flex: 0 0 var(--bwd-cw, 103px); }
}

/* Language switch "NL · EN" right of the cart (demo-ideeen.js › setupLang); their floating box is hidden in A and B only.
   (That box is NOT the language pop-up — the pop-up locks scrolling and must never be hidden.) */
html.bwd-on .trp-floating-switcher { display: none !important; }
.bwd-lang { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 22px; white-space: nowrap;
  font: 500 13px/1 Raleway, sans-serif; letter-spacing: 1px; color: var(--bwd-ink); }
.bwd-lang b { font-weight: 700; }
.bwd-lang i { font-style: normal; color: var(--bwd-olive); opacity: .7; }
.bwd-lang a { color: var(--bwd-olive); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s; }
.bwd-lang a:hover, .bwd-lang a:focus-visible { border-bottom-color: currentColor; }
@media (min-width: 981px) {
  html.bwd-on .et_pb_section_1_tb_header:not(.et_pb_sticky--top) .bwd-lang { padding-top: 31px; transition: padding .4s ease-in-out; }
  html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top .bwd-lang { padding-top: 10px; transition: padding .5s var(--bwd-ease); }
}
@media (max-width: 980px) { .bwd-lang { margin: 0 14px 0 12px; align-self: center; } }

/* Slow hover zoom on the category cards (and the jar photo in A) */
html.bwd-on .bwd-zoomframe img { transition: transform .7s var(--bwd-ease); }
html.bwd-on .bw-card:hover .bwd-zoomframe img,
html.bwd-on .bwd-zoomframe:hover img { transform: scale(1.045); }
/* phones: the same zoom, played by scrolling (.bwd-zoom = photo is in the middle of the screen; set in demo-ideeen.js) */
html.bwd-on .bwd-zoomframe.bwd-zoom img { transform: scale(1.06); transition: transform 1.4s var(--bwd-ease); }

/* Phones: the card buttons ("ONTDEK GEZICHTSVERZORGING") broke onto two left-aligned lines inside a pill that only
   fit its text. Now full card width, text centred, 12 px with slightly tighter spacing → one line on a normal phone
   (all three fit at 390 px wide, measured; at 360 px the longest wraps). Very narrow phones: two balanced, centred lines.
   (Vingel 2026-10-30: "buttons texts look weirdly aligned" … "i still think these look weird") */
@media (max-width: 760px) {
  html.bwd-on .bw-card a.bw-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    padding: 15px 12px; font-size: 12px; letter-spacing: .6px; line-height: 1.3; text-wrap: balance;
  }
}

/* The routine as steps, with a morning / evening switch */
.bwd-routine { margin: 34px auto 30px; max-width: 980px; text-align: center; }
.bwd-routine-note { margin-top: 22px !important; }
.bwd-toggle { display: inline-flex; border: 1px solid var(--bwd-olive); border-radius: 50px; padding: 4px; margin-bottom: 30px; }
.bwd-toggle button {
  font: 600 12px/1 Raleway, sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
  border: 0; background: transparent; color: var(--bwd-olive); padding: 10px 22px; border-radius: 50px; cursor: pointer;
  transition: background .35s var(--bwd-ease), color .35s;
}
.bwd-toggle button[aria-pressed="true"] { background: var(--bwd-olive); color: #fff; }
.bwd-steps { display: grid; gap: 18px; grid-template-columns: repeat(var(--bwd-n, 5), 1fr); position: relative; list-style: none; margin: 0; padding-left: 0 !important; }
.bwd-steps::before { content: ""; position: absolute; top: 23px; left: 10%; right: 10%; height: 1px; background: var(--bwd-line); }
.bwd-step { position: relative; padding: 0 4px; list-style: none !important; margin: 0 !important; }
.bwd-step::marker { content: none; }
.bwd-num {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--bwd-cream); border: 1px solid var(--bwd-olive); color: var(--bwd-olive);
  font: 600 21px/1 "Cormorant Garamond", Georgia, serif; font-variant-numeric: lining-nums;
}
.bwd-step h4 { font: 600 20px/1.2 "Cormorant Garamond", Georgia, serif; color: var(--bwd-ink); margin: 0 0 6px; padding: 0; }
.bwd-step p { font: 400 14px/1.55 Raleway, sans-serif; color: var(--bwd-ink); opacity: .82; margin: 0; padding: 0; }
.bwd-step a { color: var(--bwd-olive); text-decoration: underline; text-underline-offset: 3px; }
html.bwd-on .bwd-step { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--bwd-ease), transform .6s var(--bwd-ease); transition-delay: calc(var(--bwd-i, 0) * 100ms); }
html.bwd-on .bwd-steps.bwd-in .bwd-step { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .bwd-steps { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .bwd-steps::before { top: 10px; bottom: 10px; left: 22px; right: auto; width: 1px; height: auto; }
  .bwd-step { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; align-items: start; }
  .bwd-num { margin: 0; grid-row: span 2; }
}

/* ═══ A · Rustig (refined) ═════════════════════════════════════════════════════════════════
   Calmer and quicker than before: 24 px rise, 0.8 s, at most 3 × 90 ms of stagger, so a section is
   complete within about 1.1 s. The dark "Over Odilia" section gets its own slower, softer moment. */
html[data-bwd-v="a"] .bwd-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--bwd-ease), transform .8s var(--bwd-ease);
  transition-delay: calc(var(--bwd-i, 0) * 90ms);
}
html[data-bwd-v="a"] .bwd-reveal.bwd-in { opacity: 1; transform: none; }
html[data-bwd-v="a"] .et_pb_section_6 .bwd-reveal { transform: translateY(10px) scale(.985); transition-duration: 1.3s; }
html[data-bwd-v="a"] .et_pb_section_6 .bwd-reveal.bwd-in { transform: none; }

/* Light drift on the atelier photo — CSS only (a script version shakes in Firefox/Zen).
   Browsers without scroll-driven animations show a still photo. */
@supports (animation-timeline: view()) {
  @media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
    html[data-bwd-v="a"] .bwd-parallax img { animation: bwd-drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes bwd-drift { from { transform: translateY(-34px) scale(1.12); } to { transform: translateY(34px) scale(1.12); } }

/* ═══ B · Redactioneel ═════════════════════════════════════════════════════════════════════
   Motion lives in type and photos, like turning a magazine page. A section is in place within ~1.2 s. */

/* Headings rise from behind a mask */
html[data-bwd-v="b"] .bwd-mask { display: block; overflow: hidden; padding: 0 .2em .14em; margin: 0 -.2em -.14em; }
html[data-bwd-v="b"] .bwd-mask-in { display: block; transform: translateY(110%); transition: transform 1s var(--bwd-ease-reveal); }
html[data-bwd-v="b"] .bwd-b-h.bwd-in .bwd-mask-in { transform: none; }

/* Eyebrows: a thin olive line draws in; centred eyebrows get a line on both sides */
html[data-bwd-v="b"] .bwd-b-eyebrow { color: transparent !important; transition: color .6s ease .2s; }
html[data-bwd-v="b"] .bwd-b-eyebrow.bwd-in { color: var(--bwd-olive) !important; }
html[data-bwd-v="b"] .bwd-b-eyebrow::before,
html[data-bwd-v="b"] .bwd-b-eyebrow::after {
  content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 1px; background: var(--bwd-olive);
  margin: 0 10px 2px; transform: scaleX(0); transition: transform .7s var(--bwd-ease);
}
html[data-bwd-v="b"] .bwd-b-eyebrow::before { transform-origin: right; }
html[data-bwd-v="b"] .bwd-b-eyebrow::after { transform-origin: left; }
html[data-bwd-v="b"] .bw-split .bwd-b-eyebrow::before { width: 28px; margin-left: 0; transform-origin: left; }
html[data-bwd-v="b"] .bw-split .bwd-b-eyebrow::after { display: none; }
html[data-bwd-v="b"] .bw-on-dark .bwd-b-eyebrow::before, html[data-bwd-v="b"] .bw-on-dark .bwd-b-eyebrow::after { background: var(--bwd-cream); }
html[data-bwd-v="b"] .bw-on-dark .bwd-b-eyebrow.bwd-in { color: inherit !important; }
html[data-bwd-v="b"] .bwd-b-eyebrow.bwd-in::before, html[data-bwd-v="b"] .bwd-b-eyebrow.bwd-in::after { transform: scaleX(1); }

/* Text only fades (no movement) a beat after its heading; buttons a beat later */
html[data-bwd-v="b"] .bwd-b-text { opacity: 0; transition: opacity .8s ease .25s; }
html[data-bwd-v="b"] .bwd-b-text.bwd-late { transition-delay: .4s; }
html[data-bwd-v="b"] .bwd-b-late { transition-delay: .4s; }
html[data-bwd-v="b"] .bwd-b-text.bwd-in { opacity: 1; }

/* The italic quotes settle like ink */
html[data-bwd-v="b"] .bwd-b-quote { opacity: 0; filter: blur(4px); transition: opacity 1.4s ease-out .3s, filter 1.4s ease-out .3s; }
html[data-bwd-v="b"] .bwd-b-quote.bwd-in { opacity: 1; filter: none; }

/* Cards come in one after another */
html[data-bwd-v="b"] .bwd-b-card { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--bwd-ease), transform .9s var(--bwd-ease); transition-delay: calc(var(--bwd-i, 0) * 140ms); }
html[data-bwd-v="b"] .bwd-b-card.bwd-in { opacity: 1; transform: none; }

/* Numbers 01 / 02 / 03 above the three cards in "Ingrediënten die niet vullen" */
html[data-bwd-v="b"] .et_pb_section_2 .bw-grid { counter-reset: bwd-n; }
html[data-bwd-v="b"] .et_pb_section_2 .bw-card-body::before {
  counter-increment: bwd-n; content: "0" counter(bwd-n); display: block; margin-bottom: 8px;
  font: italic 400 40px/1 "Cormorant Garamond", Georgia, serif; color: rgba(110, 116, 93, .45);
}

/* Photos unveil from the bottom; the Odilia photo from the right; category photos also settle 1.06 → 1 */
html[data-bwd-v="b"] .bwd-unveil { clip-path: inset(100% 0 0 0 round 6px); transition: clip-path 1.2s var(--bwd-ease-reveal); }
html[data-bwd-v="b"] .bwd-unveil.bwd-from-right { clip-path: inset(0 0 0 100% round 6px); transition-duration: 1.4s; }
html[data-bwd-v="b"] .bwd-unveil.bwd-in { clip-path: inset(0 0 0 0 round 6px); }
html[data-bwd-v="b"] .bwd-settle img { transform: scale(1.06); transition: transform 1.6s var(--bwd-ease); }
html[data-bwd-v="b"] .bwd-settle.bwd-in img { transform: none; }
html[data-bwd-v="b"] .bw-card:hover .bwd-settle.bwd-in img { transform: scale(1.045); transition-duration: .7s; }
html[data-bwd-v="b"] .bwd-settle.bwd-in.bwd-zoom img { transform: scale(1.06); transition-duration: 1.4s; }
@media (max-width: 760px) {
  html[data-bwd-v="b"] .bwd-unveil { transition-duration: .9s; }
  html[data-bwd-v="b"] .bwd-unveil.bwd-from-right { clip-path: inset(100% 0 0 0 round 6px); }
  html[data-bwd-v="b"] .bwd-unveil.bwd-from-right.bwd-in { clip-path: inset(0 0 0 0 round 6px); }
}

/* ═══ The logo comes alive — top and bottom logo (demo-ideeen.js › setupLogo) ═══════════════════════════════
   Their logo image stays in place (hidden) so Divi keeps sizing it, including the pinned 72 px; the layers sit on top. */
@property --bwd-a1 { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --bwd-a2 { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.bwd-logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bwd-logo-anim { position: relative; display: inline-block; line-height: 0; vertical-align: top; max-width: 100%; }
.bwd-logo-anim > .bwd-la-orig { visibility: hidden; }
html.bwd-on body .bwd-logo-anim.bwd-logo-anim > .bwd-la-svg,
html.bwd-on body .bwd-logo-anim.bwd-logo-anim > img.bwd-la.bwd-la {
  position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important; margin: 0 !important; overflow: visible;
}
/* the sprig grows: the stem draws itself, then the leaves open bottom to top (starts 1.7 s in, as the last letters land) */
.bwd-gm .bwd-st { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bwd-gm .bwd-lf { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.bwd-gm .bwd-rest { opacity: 0; }
.bwd-gm.bwd-play .bwd-st { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur) cubic-bezier(.45, 0, .2, 1) calc(var(--d, 0s) + 1.7s); }
.bwd-gm.bwd-play .bwd-lf { transform: scale(1); transition: transform 1.4s cubic-bezier(.2, .7, .3, 1) calc(var(--d) + 1.7s); }
.bwd-gm.bwd-play .bwd-rest { opacity: 1; transition: opacity 1s ease 4.9s; }
/* the letters write themselves around the circle, both ways from the left dot (ring centre 678, 665 of 1400) */
.bwd-la-letters {
  --c: 48.43% 47.5%; --bwd-a1: -8deg; --bwd-a2: 0deg;
  -webkit-mask-image:
    conic-gradient(from 255deg at var(--c), #000 0deg, #000 var(--bwd-a1), transparent calc(var(--bwd-a1) + 8deg)),
    conic-gradient(from calc(266deg - var(--bwd-a2) - 8deg) at var(--c), transparent 0deg, #000 8deg, #000 calc(var(--bwd-a2) + 8deg), transparent calc(var(--bwd-a2) + 8deg));
          mask-image:
    conic-gradient(from 255deg at var(--c), #000 0deg, #000 var(--bwd-a1), transparent calc(var(--bwd-a1) + 8deg)),
    conic-gradient(from calc(266deg - var(--bwd-a2) - 8deg) at var(--c), transparent 0deg, #000 8deg, #000 calc(var(--bwd-a2) + 8deg), transparent calc(var(--bwd-a2) + 8deg));
}
.bwd-play > .bwd-la-letters { animation: bwd-write 2.8s cubic-bezier(.5, 0, .35, 1) both; }
@keyframes bwd-write { from { --bwd-a1: -8deg; --bwd-a2: 0deg; } to { --bwd-a1: 220deg; --bwd-a2: 182deg; } }
.bwd-done > .bwd-la-letters { -webkit-mask-image: none; mask-image: none; }
/* the wind: one breeze, then an endless gentle sway from the stem's base. The top logo is small, so it moves more. */
.bwd-la-sway { transform-box: view-box; transform-origin: 620px 1130px; --amp: 1; }
.bwd-logo-head .bwd-la-sway { --amp: 2.2; }
.bwd-play .bwd-la-sway { animation: bwd-sway 3.6s cubic-bezier(.45, 0, .2, 1) 5.4s both, bwd-breathe 9s ease-in-out 9s infinite; }
@keyframes bwd-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(calc(-1.4deg * var(--amp))); } 60% { transform: rotate(calc(.8deg * var(--amp))); } 82% { transform: rotate(calc(-.25deg * var(--amp))); } }
@keyframes bwd-breathe { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(calc(-.7deg * var(--amp))); } 70% { transform: rotate(calc(.45deg * var(--amp))); } }
.bwd-la-pollen circle { fill: rgb(95, 88, 66); opacity: 0; }
.bwd-play .bwd-la-pollen circle { animation: bwd-drift 8s cubic-bezier(.3, .2, .3, 1) calc(var(--d) + 5.6s) infinite both; }
@keyframes bwd-drift { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .75; } 100% { opacity: 0; transform: translate(var(--x), -150px); } }
.bwd-rest-off .bwd-la-sway, .bwd-rest-off .bwd-la-pollen circle { animation-play-state: paused; }
/* top logo, pinned: darker copies of the layers fade in (same timing as the shrink), so the small logo stays readable */
.bwd-la-dark { opacity: 0; transition: opacity .5s var(--bwd-ease); }
html.bwd-on .et_pb_sticky--top .bwd-la-dark { opacity: 1; }

/* ═══ Visitors who asked their device for less motion: everything shown, nothing moves ══════ */
@media (prefers-reduced-motion: reduce) {
  html.bwd-on :is(.bwd-reveal, .bwd-step, .bwd-b-text, .bwd-b-quote, .bwd-b-card, .bwd-mask-in, .bwd-unveil, .bwd-settle img, .bwd-zoomframe img) {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important;
  }
  html.bwd-on .bwd-b-eyebrow { color: var(--bwd-olive) !important; transition: none !important; }
  html.bwd-on .bwd-b-eyebrow::before, html.bwd-on .bwd-b-eyebrow::after { transform: scaleX(1) !important; transition: none !important; }
  html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top, html.bwd-on .et_pb_section_1_tb_header.et_pb_sticky--top * { transition: none !important; }
}