/* =========================================================
   Off Grid Portal Help Me Pick
   Compact fixed finder. Only the final results view scrolls.
========================================================= */

body.ogp-finder-open{overflow:hidden!important}

.ogp-finder-root,
.ogp-finder-root *{box-sizing:border-box!important}

.ogp-finder-root{
  --ogp-finder-teal:#063828;
  --ogp-finder-teal-dark:#042C20;
  --ogp-finder-orange:#EFA918;
  --ogp-finder-green:#667C38;
  --ogp-finder-dark:#042C20;
  --ogp-finder-text:#273A31;
  --ogp-finder-muted:#66766E;
  --ogp-finder-soft:#FBFAF6;
  --ogp-finder-soft-2:#F4F3EC;
  --ogp-finder-white:#FFFFFF;
  --ogp-finder-border:#D7DED3;
  --ogp-finder-border-soft:#E7EBE4;
  position:fixed!important;
  inset:0!important;
  z-index:999998!important;
  pointer-events:none!important;
  font-family:"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif!important;
  font-weight:500!important;
  color:var(--ogp-finder-text)!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:optimizeLegibility!important;
}

.ogp-finder-root button,
.ogp-finder-root a,
.ogp-finder-root input,
.ogp-finder-root textarea,
.ogp-finder-root select,
.ogp-finder-root h1,
.ogp-finder-root h2,
.ogp-finder-root h3,
.ogp-finder-root p,
.ogp-finder-root span,
.ogp-finder-root small,
.ogp-finder-root em{
  font-family:"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif!important;
}

.ogp-finder-backdrop{
  position:fixed!important;
  inset:0!important;
  background:rgba(16,40,47,.58)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  pointer-events:auto!important;
}

/* Fixed centered popup. Intro/questions never scroll internally. */
.ogp-finder-modal{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(92vw,620px)!important;
  max-height:min(86vh,500px)!important;
  overflow:hidden!important;
  background:var(--ogp-finder-white)!important;
  border:1px solid var(--ogp-finder-border)!important;
  border-top:4px solid var(--ogp-finder-teal)!important;
  border-radius:14px!important;
  box-shadow:0 24px 62px rgba(16,40,47,.22)!important;
  pointer-events:auto!important;
  color:var(--ogp-finder-text)!important;
}

/* Only the final results view receives a fixed viewport height and internal scroll. */
.ogp-finder-modal.is-results{
  width:min(94vw,900px)!important;
  height:min(82vh,650px)!important;
  max-height:min(82vh,650px)!important;
}

.ogp-finder-close{
  position:absolute!important;
  z-index:10!important;
  right:9px!important;
  top:8px!important;
  width:29px!important;
  height:29px!important;
  min-width:29px!important;
  min-height:29px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--ogp-finder-border)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:var(--ogp-finder-dark)!important;
  box-shadow:none!important;
  font-size:19px!important;
  line-height:1!important;
  font-weight:500!important;
  cursor:pointer!important;
}
.ogp-finder-close:hover{background:var(--ogp-finder-soft)!important;border-color:rgba(6,56,40,.42)!important;color:var(--ogp-finder-teal-dark)!important}

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

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

.ogp-finder-question{padding-top:15px!important}

.ogp-finder-kicker{
  margin:0 0 5px!important;
  color:var(--ogp-finder-teal-dark)!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

.ogp-finder-modal h2{
  margin:0!important;
  padding-right:28px!important;
  color:var(--ogp-finder-dark)!important;
  font-size:clamp(24px,3vw,30px)!important;
  line-height:1.08!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  text-rendering:optimizeLegibility!important;
}

.ogp-finder-sub{
  max-width:570px!important;
  margin:6px 0 0!important;
  color:var(--ogp-finder-muted)!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:500!important;
}

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

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

.ogp-finder-badges span:first-child{
  border-color:rgba(239,169,24,.26)!important;
  background:#FBFAF6!important;
}

.ogp-finder-progress{
  height:4px!important;
  margin:0!important;
  background:var(--ogp-finder-soft-2)!important;
  overflow:hidden!important;
}
.ogp-finder-progress span{
  display:block!important;
  height:100%!important;
  background:var(--ogp-finder-teal)!important;
  transition:width .18s ease!important;
}

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

.ogp-finder-answer{
  width:100%!important;
  min-height:57px!important;
  margin:0!important;
  padding:8px 9px!important;
  display:block!important;
  text-align:left!important;
  border:1px solid var(--ogp-finder-border)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--ogp-finder-text)!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease!important;
}
.ogp-finder-answer:hover{
  border-color:rgba(6,56,40,.5)!important;
  background:var(--ogp-finder-soft)!important;
  transform:translateY(-1px)!important;
}
.ogp-finder-answer span{
  display:block!important;
  color:var(--ogp-finder-dark)!important;
  font-size:11.8px!important;
  line-height:1.18!important;
  font-weight:800!important;
}
.ogp-finder-answer small{
  display:-webkit-box!important;
  margin-top:3px!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  color:var(--ogp-finder-muted)!important;
  font-size:9.2px!important;
  line-height:1.24!important;
  font-weight:500!important;
}

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

.ogp-finder-btn,
.ogp-finder-link{
  min-height:35px!important;
  margin:0!important;
  padding:7px 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:7px!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:700!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:.16s ease!important;
}
.ogp-finder-btn{
  border:1px solid var(--ogp-finder-teal)!important;
  background:var(--ogp-finder-teal)!important;
  color:#fff!important;
}
.ogp-finder-btn:hover{background:var(--ogp-finder-teal-dark)!important;border-color:var(--ogp-finder-teal-dark)!important;color:#fff!important}
.ogp-finder-link{
  border:1px solid var(--ogp-finder-border)!important;
  background:#fff!important;
  color:var(--ogp-finder-dark)!important;
}
.ogp-finder-link:hover{border-color:rgba(6,56,40,.42)!important;color:var(--ogp-finder-teal-dark)!important;background:var(--ogp-finder-soft)!important}
.ogp-finder-link:disabled{opacity:.38!important;cursor:not-allowed!important}

.ogp-finder-spinner{
  width:31px!important;
  height:31px!important;
  margin:0 0 9px!important;
  border:3px solid var(--ogp-finder-soft-2)!important;
  border-top-color:var(--ogp-finder-orange)!important;
  border-radius:50%!important;
  animation:ogp-finder-spin .8s linear infinite!important;
}
@keyframes ogp-finder-spin{to{transform:rotate(360deg)}}

/* Fixed compact trigger on desktop and mobile. */
.ogp-finder-floating{
  position:fixed!important;
  right:18px!important;
  bottom:20px!important;
  z-index:999997!important;
  min-height:38px!important;
  margin:0!important;
  padding:8px 12px!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid var(--ogp-finder-dark)!important;
  border-radius:8px!important;
  background:var(--ogp-finder-dark)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(16,40,47,.18)!important;
  pointer-events:auto!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:700!important;
  cursor:pointer!important;
}
.ogp-finder-floating.is-visible{display:flex!important}
.ogp-finder-floating:hover{background:var(--ogp-finder-teal)!important;border-color:var(--ogp-finder-teal)!important}
.ogp-finder-floating-icon{
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--ogp-finder-orange)!important;
  color:#fff!important;
  border-radius:6px!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
}

/* =========================================================
   RESULTS — THIS IS THE ONLY VERTICALLY SCROLLING VIEW
========================================================= */
.ogp-finder-results-scroll{
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--ogp-finder-teal) var(--ogp-finder-soft)!important;
}
.ogp-finder-results-scroll::-webkit-scrollbar{width:7px!important}
.ogp-finder-results-scroll::-webkit-scrollbar-track{background:var(--ogp-finder-soft)!important}
.ogp-finder-results-scroll::-webkit-scrollbar-thumb{background:var(--ogp-finder-teal)!important;border-radius:10px!important}

.ogp-finder-result-head{
  padding:17px 20px 12px!important;
  background:var(--ogp-finder-soft)!important;
  border-bottom:1px solid var(--ogp-finder-border)!important;
}
.ogp-finder-result-head h2{font-size:clamp(23px,2.8vw,30px)!important}
.ogp-finder-result-head > p:not(.ogp-finder-kicker){
  max-width:680px!important;
  margin:6px 0 0!important;
  color:var(--ogp-finder-muted)!important;
  font-size:11.5px!important;
  line-height:1.43!important;
  font-weight:500!important;
}

.ogp-finder-result-section{padding:12px 18px 0!important}
.ogp-finder-section-title{margin:0 0 7px!important}
.ogp-finder-section-title h3{
  margin:0!important;
  color:var(--ogp-finder-dark)!important;
  font-size:15.5px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:-.018em!important;
}
.ogp-finder-section-title p{
  margin:2px 0 0!important;
  color:var(--ogp-finder-muted)!important;
  font-size:9.7px!important;
  line-height:1.35!important;
  font-weight:500!important;
}

.ogp-finder-products{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
.ogp-finder-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(--ogp-finder-border)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--ogp-finder-text)!important;
  text-decoration:none!important;
  box-shadow:0 4px 12px rgba(16,40,47,.035)!important;
  transition:.16s ease!important;
}
.ogp-finder-product:hover{border-color:rgba(6,56,40,.46)!important;background:#FBFAF6!important;transform:translateY(-1px)!important;color:var(--ogp-finder-text)!important}
.ogp-finder-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(--ogp-finder-border-soft)!important;
  border-radius:7px!important;
  background:#fff!important;
}
.ogp-finder-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;
}
.ogp-finder-product-copy{min-width:0!important;display:block!important}
.ogp-finder-product em,
.ogp-finder-guide em{
  display:inline-flex!important;
  margin:0 0 3px!important;
  padding:3px 6px!important;
  border:1px solid rgba(239,169,24,.22)!important;
  border-radius:4px!important;
  background:#FBFAF6!important;
  color:#D9950D!important;
  font-size:8px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:800!important;
}
.ogp-finder-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(--ogp-finder-dark)!important;
  font-size:11.2px!important;
  line-height:1.24!important;
  font-weight:800!important;
}
.ogp-finder-price{
  margin:0 0 3px!important;
  color:var(--ogp-finder-teal-dark)!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
.ogp-finder-price del{opacity:.5!important;margin-right:3px!important}
.ogp-finder-product small{
  display:block!important;
  color:var(--ogp-finder-muted)!important;
  font-size:9px!important;
  line-height:1.27!important;
  font-weight:500!important;
}

.ogp-finder-guides{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
.ogp-finder-guide{
  min-width:0!important;
  padding:9px 10px!important;
  display:block!important;
  border:1px solid var(--ogp-finder-border)!important;
  border-left:3px solid var(--ogp-finder-teal)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--ogp-finder-text)!important;
  text-decoration:none!important;
  transition:.16s ease!important;
}
.ogp-finder-guide:hover{border-color:rgba(6,56,40,.42)!important;border-left-color:var(--ogp-finder-orange)!important;background:var(--ogp-finder-soft)!important;color:var(--ogp-finder-text)!important}
.ogp-finder-guide h3{
  margin:0 0 3px!important;
  color:var(--ogp-finder-dark)!important;
  font-size:11.8px!important;
  line-height:1.23!important;
  font-weight:800!important;
}
.ogp-finder-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(--ogp-finder-muted)!important;
  font-size:9.5px!important;
  line-height:1.31!important;
  font-weight:500!important;
}
.ogp-finder-guide small{
  display:block!important;
  color:var(--ogp-finder-teal-dark)!important;
  font-size:9px!important;
  line-height:1.28!important;
  font-weight:700!important;
}

.ogp-finder-result-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:7px!important;
  padding:12px 18px 15px!important;
}

/* =========================================================
   RESPONSIVE — QUESTION VIEWS STAY FIXED AND COMPACT
========================================================= */
@media(max-width:700px){
  .ogp-finder-modal{
    width:calc(100vw - 20px)!important;
    max-height:86dvh!important;
    border-radius:12px!important;
  }
  .ogp-finder-modal.is-results{
    width:calc(100vw - 16px)!important;
    height:88dvh!important;
    max-height:88dvh!important;
  }
  .ogp-finder-panel{padding:15px 13px 13px!important}
  .ogp-finder-intro,.ogp-finder-loading{min-height:208px!important}
  .ogp-finder-question{padding-top:13px!important}
  .ogp-finder-modal h2{font-size:22px!important}
  .ogp-finder-sub{font-size:11.3px!important;line-height:1.4!important}
  .ogp-finder-badges{margin:9px 0 10px!important;gap:4px!important}
  .ogp-finder-badges span{font-size:8px!important;padding:4px 6px!important;min-height:22px!important}
  .ogp-finder-answers{gap:6px!important;margin-top:8px!important}
  .ogp-finder-answer{min-height:56px!important;padding:7px 8px!important}
  .ogp-finder-answer span{font-size:10.6px!important}
  .ogp-finder-answer small{font-size:8.4px!important;line-height:1.2!important}
  .ogp-finder-actions{margin-top:8px!important}
  .ogp-finder-btn,.ogp-finder-link{min-height:33px!important;padding:6px 10px!important;font-size:9.8px!important}
  .ogp-finder-floating{right:12px!important;bottom:16px!important;min-height:36px!important;padding:7px 10px!important;font-size:10.4px!important}
  .ogp-finder-floating-icon{width:18px!important;height:18px!important;flex-basis:18px!important}
  .ogp-finder-result-head{padding:15px 14px 11px!important}
  .ogp-finder-result-head h2{font-size:23px!important}
  .ogp-finder-result-section{padding:10px 11px 0!important}
  .ogp-finder-products,.ogp-finder-guides{grid-template-columns:1fr!important;gap:6px!important}
  .ogp-finder-product{grid-template-columns:66px minmax(0,1fr)!important;min-height:84px!important;padding:7px!important}
  .ogp-finder-product-media{width:66px!important;height:66px!important}
  .ogp-finder-result-actions{padding:10px 11px 13px!important}
}

@media(max-width:390px){
  .ogp-finder-panel{padding:13px 11px 12px!important}
  .ogp-finder-modal h2{font-size:20px!important}
  .ogp-finder-answer{min-height:54px!important;padding:6px 7px!important}
  .ogp-finder-answer span{font-size:10px!important}
  .ogp-finder-answer small{font-size:7.9px!important}
  .ogp-finder-kicker{font-size:8.3px!important}
}

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