/* HeyBear · Reviews (customer videos) (sections/hb-reviews.liquid) */
/* from home */
.rating.ugc{margin-top:18px;background:#fff;border:2px solid var(--ink);border-radius:var(--r-pill);padding:10px 16px;box-shadow:0 3px 0 var(--ink)}
.rating.ugc .stars svg{width:20px;height:20px}
.ugc{background:#EAF6DA;position:relative;overflow:hidden;padding-top:clamp(70px,9vw,120px)}
.ugc-head{text-align:center;position:relative}
.ugc-pre{font:italic 400 clamp(24px,2.4vw,32px)/1 var(--f-serif);margin:0}
.ugc .h2{margin-top:8px}
.ugc-note{position:absolute;left:clamp(16px,4vw,40px);bottom:-70px;font:800 15px/1.1 var(--f-display);transform:rotate(-6deg);text-align:left;color:var(--ink)}
.ugc-note svg{display:block;width:46px;margin:4px 0 0 -6px;transform:rotate(10deg)}
.ugc-rail{margin-top:clamp(60px,7vw,90px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-block:14px 26px;outline:none}
.ugc-rail::-webkit-scrollbar{display:none}
.ugc-rail:focus-visible{outline:3px solid var(--sky-deep);outline-offset:-3px}
.ugc-track{display:flex;gap:16px;padding-inline:clamp(16px,6vw,90px);width:max-content}
.vid{flex:none;width:clamp(190px,17vw,240px);aspect-ratio:9/14;border:2.5px solid var(--ink);border-radius:22px;overflow:hidden;position:relative;scroll-snap-align:center;background:var(--vb);box-shadow:0 6px 0 var(--ink)}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-vimeo-player{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:#000}
.vid-vimeo-preview{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .25s ease}
.vid-vimeo-preview-player{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--vb)}
.vid.is-vimeo-preview-ready .vid-vimeo-preview{opacity:1}
.vid-vimeo-poster{transition:opacity .25s ease}
.vid.is-vimeo-preview-ready .vid-vimeo-poster{opacity:0}
.vid-toggle{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer}
.vid-toggle:focus-visible{outline:4px solid var(--cream);outline-offset:-7px;border-radius:18px}
.vid-control{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;background:var(--cream);border:2.5px solid var(--ink);display:grid;place-items:center;box-shadow:0 4px 0 var(--ink);transform:translate(-50%,-50%);transition:opacity .15s ease}
.vid-control svg{position:absolute;width:24px;height:24px}
.vid-play-icon{margin-left:3px}
.vid-pause-icon{display:none}
.vid.is-playing-sound .vid-play-icon{display:none}
.vid.is-playing-sound .vid-pause-icon{display:block}
.vid.is-playing-sound .vid-control{opacity:0}
.vid .ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--vb)}
.vid .ph img{width:62%;max-height:52%;object-fit:contain}
.vid .vid-vimeo-poster img{width:100%;height:100%;max-height:none;object-fit:cover;filter:none}
.vid.is-vimeo-playing .vid-vimeo-poster,.vid.is-vimeo-playing .vid-vimeo-preview,.vid.is-vimeo-playing .cap{display:none}
.vid .play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,247,232,.92);border:2.5px solid var(--ink);display:grid;place-items:center;box-shadow:0 4px 0 var(--ink);z-index:2}
.vid .play svg{width:20px;margin-left:3px}
.vid .cap{position:absolute;left:10px;right:10px;bottom:12px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px}
.vid .cap b{font:800 14px/1.1 var(--f-display);background:var(--ink);color:var(--cream);padding:7px 10px;border-radius:12px}
.vid .cap span{white-space:nowrap;font:700 11px/1 var(--f-body);background:rgba(255,255,255,.8);border:1.5px solid var(--ink);padding:5px 8px;border-radius:var(--r-pill)}
.vid .slot{position:absolute;top:10px;left:10px;z-index:2;font:700 10px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.8);border:1.5px dashed var(--ink);padding:5px 8px;border-radius:var(--r-pill)}
.ugc-nav{display:flex;justify-content:center;gap:14px;margin-top:22px;position:relative;z-index:3}
.ugc-btn{width:52px;height:52px;border-radius:50%;border:2.5px solid var(--ink);background:var(--cream);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.ugc-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.ugc-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ugc-btn svg{width:22px}
.hills{position:relative;height:clamp(150px,16vw,240px);margin-top:-30px}
.hills svg{position:absolute;inset:0;width:100%;height:100%}
.hill-car{position:absolute;left:0;top:0;display:block;width:clamp(120px,12vw,180px);height:auto!important;max-width:none;max-height:none;aspect-ratio:229/92;object-fit:contain;transform-origin:50% 94%;will-change:transform;z-index:2}
@media (max-width:760px){
.ugc-note{display:none}
.vid{width:62vw}
}
@media (prefers-reduced-motion:reduce){
.vid-vimeo-preview{display:none}
.vid-vimeo-poster{opacity:1!important}
}
