/* =========================================================
   63 VEGAN & FIT MATCH FINDER
   Compact fixed popup. Only final results scroll.
========================================================= */

body.vfwmf-open{
  overflow:hidden!important;
}

.vfwmf-root,
.vfwmf-root *{
  box-sizing:border-box!important;
}

.vfwmf-root{
  --vfwmf-green:#064B32;
  --vfwmf-green-dark:#043824;
  --vfwmf-leaf:#527F46;
  --vfwmf-leaf-dark:#416B39;
  --vfwmf-olive:#A5A17B;
  --vfwmf-olive-soft:#EEECDD;
  --vfwmf-cream:#F7F7F1;
  --vfwmf-soft:#F0F4ED;
  --vfwmf-white:#FFFFFF;
  --vfwmf-text:#24352D;
  --vfwmf-muted:#68746E;
  --vfwmf-border:#DCE5DC;
  --vfwmf-border-soft:#E8EEE8;

  position:fixed!important;
  inset:0!important;
  z-index:999998!important;
  pointer-events:none!important;

  color:var(--vfwmf-text)!important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif!important;

  font-weight:400!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:optimizeLegibility!important;
}

.vfwmf-root button,
.vfwmf-root a,
.vfwmf-root input,
.vfwmf-root textarea,
.vfwmf-root select,
.vfwmf-root h1,
.vfwmf-root h2,
.vfwmf-root h3,
.vfwmf-root p,
.vfwmf-root span,
.vfwmf-root small,
.vfwmf-root em{
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif!important;
}

.vfwmf-backdrop{
  position:fixed!important;
  inset:0!important;
  background:rgba(4,56,36,.60)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  pointer-events:auto!important;
}

/* Intro/questions stay fixed and do not scroll internally. */
.vfwmf-modal{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;

  width:min(92vw,620px)!important;
  max-height:min(86dvh,500px)!important;

  overflow:hidden!important;

  background:var(--vfwmf-white)!important;
  border:1px solid var(--vfwmf-border)!important;
  border-top:4px solid var(--vfwmf-green)!important;
  border-radius:14px!important;
  box-shadow:0 24px 64px rgba(4,56,36,.24)!important;

  pointer-events:auto!important;
  color:var(--vfwmf-text)!important;
}

/* Only the results state becomes a taller scroll container. */
.vfwmf-modal.is-results{
  width:min(94vw,900px)!important;
  height:auto!important;
  max-height:min(82dvh,680px)!important;
}

.vfwmf-close{
  position:absolute!important;
  z-index:10!important;
  right:9px!important;
  top:8px!important;

  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;

  margin:0!important;
  padding:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:1px solid var(--vfwmf-border)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:var(--vfwmf-green)!important;
  box-shadow:none!important;

  font-size:20px!important;
  line-height:1!important;
  font-weight:400!important;
  cursor:pointer!important;
}

.vfwmf-close:hover{
  background:var(--vfwmf-soft)!important;
  border-color:rgba(82,127,70,.46)!important;
  color:var(--vfwmf-green-dark)!important;
}

.vfwmf-panel{
  width:100%!important;
  padding:17px 19px 16px!important;
  overflow:hidden!important;
  background:#fff!important;
}

.vfwmf-intro,
.vfwmf-loading{
  min-height:205px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

.vfwmf-question{
  padding-top:16px!important;
}

.vfwmf-kicker{
  margin:0 0 5px!important;
  color:var(--vfwmf-leaf)!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:750!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

.vfwmf-modal h2{
  margin:0!important;
  padding-right:30px!important;
  color:var(--vfwmf-green)!important;
  font-size:clamp(24px,3vw,31px)!important;
  line-height:1.08!important;
  font-weight:760!important;
  letter-spacing:-.035em!important;
}

.vfwmf-sub{
  max-width:575px!important;
  margin:7px 0 0!important;
  color:var(--vfwmf-muted)!important;
  font-size:12.2px!important;
  line-height:1.46!important;
  font-weight:400!important;
}

.vfwmf-badges{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin:10px 0 12px!important;
}

.vfwmf-badges span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:24px!important;
  padding:4px 8px!important;
  border:1px solid var(--vfwmf-border)!important;
  border-radius:6px!important;
  background:var(--vfwmf-soft)!important;
  color:var(--vfwmf-green)!important;
  font-size:8.8px!important;
  line-height:1!important;
  font-weight:650!important;
}

.vfwmf-badges span:first-child{
  border-color:rgba(165,161,123,.36)!important;
  background:var(--vfwmf-cream)!important;
}

.vfwmf-progress{
  height:4px!important;
  margin:0!important;
  background:var(--vfwmf-soft)!important;
  overflow:hidden!important;
}

.vfwmf-progress span{
  display:block!important;
  height:100%!important;
  background:var(--vfwmf-leaf)!important;
  transition:width .18s ease!important;
}

.vfwmf-answers{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  margin-top:10px!important;
}

.vfwmf-answer{
  width:100%!important;
  min-height:58px!important;
  margin:0!important;
  padding:8px 9px!important;

  display:block!important;
  text-align:left!important;

  border:1px solid var(--vfwmf-border)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--vfwmf-text)!important;
  box-shadow:none!important;

  cursor:pointer!important;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease!important;
}

.vfwmf-answer:hover{
  border-color:rgba(82,127,70,.52)!important;
  background:var(--vfwmf-soft)!important;
  transform:translateY(-1px)!important;
}

.vfwmf-answer span{
  display:block!important;
  color:var(--vfwmf-green)!important;
  font-size:11.8px!important;
  line-height:1.18!important;
  font-weight:700!important;
}

.vfwmf-answer small{
  display:block!important;
  margin-top:3px!important;
  color:var(--vfwmf-muted)!important;
  font-size:9.2px!important;
  line-height:1.25!important;
  font-weight:400!important;
}

.vfwmf-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:7px!important;
  margin-top:9px!important;
}

.vfwmf-actions-start{
  justify-content:flex-start!important;
}

.vfwmf-btn,
.vfwmf-link{
  min-height:35px!important;
  margin:0!important;
  padding:7px 13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:6px!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:650!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:.16s ease!important;
}

.vfwmf-btn{
  border:1px solid var(--vfwmf-green)!important;
  background:var(--vfwmf-green)!important;
  color:#fff!important;
}

.vfwmf-btn:hover{
  background:var(--vfwmf-green-dark)!important;
  border-color:var(--vfwmf-green-dark)!important;
  color:#fff!important;
}

.vfwmf-link{
  border:1px solid var(--vfwmf-border)!important;
  background:#fff!important;
  color:var(--vfwmf-green)!important;
}

.vfwmf-link:hover{
  border-color:rgba(82,127,70,.42)!important;
  color:var(--vfwmf-leaf-dark)!important;
  background:var(--vfwmf-soft)!important;
}

.vfwmf-link:disabled{
  opacity:.38!important;
  cursor:not-allowed!important;
}

.vfwmf-spinner{
  width:31px!important;
  height:31px!important;
  margin:0 0 9px!important;
  border:3px solid var(--vfwmf-soft)!important;
  border-top-color:var(--vfwmf-olive)!important;
  border-radius:50%!important;
  animation:vfwmf-spin .8s linear infinite!important;
}

@keyframes vfwmf-spin{
  to{transform:rotate(360deg)}
}

/* =========================================================
   FIXED FLOATING BUTTON
========================================================= */

.vfwmf-floating{
  position:fixed!important;
  right:20px!important;
  bottom:22px!important;
  z-index:999997!important;

  min-height:38px!important;
  margin:0!important;
  padding:8px 13px!important;

  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;

  border:1px solid var(--vfwmf-green)!important;
  border-radius:7px!important;
  background:var(--vfwmf-green)!important;
  color:#fff!important;
  box-shadow:0 10px 25px rgba(4,56,36,.18)!important;

  pointer-events:auto!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:680!important;
  cursor:pointer!important;
}

.vfwmf-floating.is-visible{
  display:flex!important;
}

.vfwmf-floating:hover{
  background:var(--vfwmf-leaf)!important;
  border-color:var(--vfwmf-leaf)!important;
}

.vfwmf-floating-dot{
  width:6px!important;
  height:6px!important;
  flex:0 0 6px!important;
  background:var(--vfwmf-olive-soft)!important;
  border-radius:50%!important;
}

/* =========================================================
   RESULTS — THIS IS THE ONLY SCROLLABLE FINDER VIEW
========================================================= */

.vfwmf-results-scroll{
  width:100%!important;
  height:auto!important;
  max-height:min(82dvh,680px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--vfwmf-leaf) var(--vfwmf-soft)!important;
}

.vfwmf-results-scroll::-webkit-scrollbar{
  width:7px!important;
}

.vfwmf-results-scroll::-webkit-scrollbar-track{
  background:var(--vfwmf-soft)!important;
}

.vfwmf-results-scroll::-webkit-scrollbar-thumb{
  background:var(--vfwmf-leaf)!important;
  border-radius:10px!important;
}

.vfwmf-result-head{
  padding:17px 21px 13px!important;
  background:var(--vfwmf-cream)!important;
  border-bottom:1px solid var(--vfwmf-border)!important;
}

.vfwmf-result-head h2{
  font-size:clamp(24px,2.8vw,31px)!important;
}

.vfwmf-result-head > p:not(.vfwmf-kicker){
  max-width:680px!important;
  margin:6px 0 0!important;
  color:var(--vfwmf-muted)!important;
  font-size:11.4px!important;
  line-height:1.44!important;
  font-weight:400!important;
}

.vfwmf-result-section{
  padding:12px 19px 0!important;
}

.vfwmf-section-title{
  margin:0 0 7px!important;
}

.vfwmf-section-title h3{
  margin:0!important;
  color:var(--vfwmf-green)!important;
  font-size:15.5px!important;
  line-height:1.2!important;
  font-weight:730!important;
  letter-spacing:-.018em!important;
}

.vfwmf-section-title p{
  margin:2px 0 0!important;
  color:var(--vfwmf-muted)!important;
  font-size:9.7px!important;
  line-height:1.35!important;
  font-weight:400!important;
}

.vfwmf-products{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}

.vfwmf-product{
  min-width:0!important;
  min-height:94px!important;
  padding:8px!important;

  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:9px!important;
  align-items:center!important;

  border:1px solid var(--vfwmf-border)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--vfwmf-text)!important;
  text-decoration:none!important;
  box-shadow:0 4px 12px rgba(4,56,36,.035)!important;
  transition:.16s ease!important;
}

.vfwmf-product:hover{
  border-color:rgba(82,127,70,.46)!important;
  background:#FCFDFC!important;
  transform:translateY(-1px)!important;
  color:var(--vfwmf-text)!important;
}

.vfwmf-product-media{
  width:72px!important;
  height:72px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:1px solid var(--vfwmf-border-soft)!important;
  border-radius:7px!important;
  background:#fff!important;
}

.vfwmf-product-media img{
  width:90%!important;
  height:90%!important;
  max-width:90%!important;
  max-height:90%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  object-fit:contain!important;
  background:#fff!important;
}

.vfwmf-product-copy{
  min-width:0!important;
  display:block!important;
}

.vfwmf-product em,
.vfwmf-guide em{
  display:inline-flex!important;
  margin:0 0 3px!important;
  padding:3px 6px!important;
  border:1px solid rgba(165,161,123,.35)!important;
  border-radius:4px!important;
  background:var(--vfwmf-cream)!important;
  color:#746F4E!important;
  font-size:8px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:680!important;
}

.vfwmf-product h3{
  margin:0 0 3px!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  color:var(--vfwmf-green)!important;
  font-size:11.1px!important;
  line-height:1.24!important;
  font-weight:690!important;
}

.vfwmf-price{
  margin:0 0 3px!important;
  color:var(--vfwmf-leaf-dark)!important;
  font-size:10.4px!important;
  line-height:1.2!important;
  font-weight:720!important;
}

.vfwmf-price del{
  opacity:.52!important;
  margin-right:3px!important;
}

.vfwmf-product small{
  display:block!important;
  color:var(--vfwmf-muted)!important;
  font-size:8.9px!important;
  line-height:1.28!important;
  font-weight:400!important;
}

.vfwmf-guides{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}

.vfwmf-guide{
  min-width:0!important;
  padding:10px 11px!important;
  display:block!important;
  border:1px solid var(--vfwmf-border)!important;
  border-left:3px solid var(--vfwmf-leaf)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--vfwmf-text)!important;
  text-decoration:none!important;
  transition:.16s ease!important;
}

.vfwmf-guide:hover{
  border-color:rgba(82,127,70,.42)!important;
  border-left-color:var(--vfwmf-olive)!important;
  background:var(--vfwmf-soft)!important;
  color:var(--vfwmf-text)!important;
}

.vfwmf-guide h3{
  margin:0 0 3px!important;
  color:var(--vfwmf-green)!important;
  font-size:11.8px!important;
  line-height:1.23!important;
  font-weight:700!important;
}

.vfwmf-guide p{
  margin:0 0 3px!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  color:var(--vfwmf-muted)!important;
  font-size:9.5px!important;
  line-height:1.32!important;
  font-weight:400!important;
}

.vfwmf-guide small{
  display:block!important;
  color:var(--vfwmf-leaf-dark)!important;
  font-size:8.9px!important;
  line-height:1.28!important;
  font-weight:580!important;
}

.vfwmf-result-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:7px!important;
  padding:12px 19px 16px!important;
}

/* =========================================================
   MOBILE — QUESTIONS STAY COMPACT AND NON-SCROLLING
========================================================= */

@media(max-width:700px){
  .vfwmf-modal{
    width:calc(100vw - 22px)!important;
    max-height:88dvh!important;
    border-radius:12px!important;
  }

  .vfwmf-modal.is-results{
    width:calc(100vw - 18px)!important;
    height:auto!important;
    max-height:88dvh!important;
  }

  .vfwmf-results-scroll{
    max-height:88dvh!important;
  }

  .vfwmf-panel{
    padding:16px 14px 14px!important;
  }

  .vfwmf-intro,
  .vfwmf-loading{
    min-height:195px!important;
  }

  .vfwmf-question{
    padding-top:14px!important;
  }

  .vfwmf-modal h2{
    font-size:23px!important;
  }

  .vfwmf-sub{
    font-size:11.6px!important;
    line-height:1.4!important;
  }

  .vfwmf-badges{
    margin:9px 0 10px!important;
    gap:4px!important;
  }

  .vfwmf-badges span{
    font-size:8.2px!important;
    padding:4px 6px!important;
    min-height:22px!important;
  }

  .vfwmf-answers{
    gap:6px!important;
    margin-top:8px!important;
  }

  .vfwmf-answer{
    min-height:57px!important;
    padding:7px 8px!important;
  }

  .vfwmf-answer span{
    font-size:10.7px!important;
  }

  .vfwmf-answer small{
    font-size:8.6px!important;
    line-height:1.21!important;
  }

  .vfwmf-actions{
    margin-top:8px!important;
  }

  .vfwmf-btn,
  .vfwmf-link{
    min-height:33px!important;
    padding:6px 11px!important;
    font-size:9.8px!important;
  }

  .vfwmf-floating{
    right:13px!important;
    bottom:18px!important;
    min-height:36px!important;
    padding:7px 11px!important;
    font-size:10.5px!important;
  }

  .vfwmf-result-head{
    padding:15px 14px 11px!important;
  }

  .vfwmf-result-head h2{
    font-size:23px!important;
  }

  .vfwmf-result-section{
    padding:10px 11px 0!important;
  }

  .vfwmf-products,
  .vfwmf-guides{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }

  .vfwmf-product{
    grid-template-columns:66px minmax(0,1fr)!important;
    min-height:84px!important;
    padding:7px!important;
  }

  .vfwmf-product-media{
    width:66px!important;
    height:66px!important;
  }

  .vfwmf-result-actions{
    padding:10px 11px 14px!important;
  }
}

@media(max-width:390px){
  .vfwmf-panel{
    padding:14px 11px 12px!important;
  }

  .vfwmf-modal h2{
    font-size:21px!important;
  }

  .vfwmf-answers{
    grid-template-columns:1fr 1fr!important;
  }

  .vfwmf-answer{
    min-height:55px!important;
    padding:7px!important;
  }

  .vfwmf-answer span{
    font-size:10px!important;
  }

  .vfwmf-answer small{
    font-size:8px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .vfwmf-root *{
    transition:none!important;
    animation-duration:.001ms!important;
  }
}