.section-open-eh-stu-ugc{--ugc-ink: #0a0a0a;--ugc-white: #fff;--ugc-brand: #ff7a3d;--ugc-track: #929292;--ugc-ring: #b196ff;--ugc-glass: rgba(212, 215, 222, .3);padding-top:var(--ugc-pt-mb, 0px);padding-bottom:var(--ugc-pb-mb, 0px);background:#eeeaf9;overflow:hidden}.section-open-eh-stu-ugc__heading{margin:0;padding:calc(16 * 100vw / 393) 0;color:#050505;font-family:var(--Shokz-Sans-Display, "Shokz Sans Display");font-size:calc(24 * 100vw / 393);font-weight:500;line-height:calc(32 * 100vw / 393);letter-spacing:.16px;text-align:left;word-break:break-word}.section-open-eh-stu-ugc__surface{margin:0 -16px;padding:calc(16 * 100vw / 393);background:linear-gradient(180deg,#b3c0c8,#3b6162)}.section-open-eh-stu-ugc__avatars{display:flex;align-items:flex-start;gap:calc(16 * 100vw / 393);margin-bottom:calc(16 * 100vw / 393);overflow-x:auto;scrollbar-width:none}.section-open-eh-stu-ugc__avatars::-webkit-scrollbar{display:none}.section-open-eh-stu-ugc__avatar{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:calc(4 * 100vw / 393);margin:0;padding:0;border:0;background:transparent;color:var(--ugc-white);cursor:pointer}.section-open-eh-stu-ugc__avatar-photo{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:calc(82 * 100vw / 393);height:calc(82 * 100vw / 393);padding:calc(6 * 100vw / 393);border-radius:50%}.section-open-eh-stu-ugc__avatar.is-active .section-open-eh-stu-ugc__avatar-photo:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:calc(4 * 100vw / 393);background:conic-gradient(from 45deg,#b196ff,#5000ac,#3c0579,#5000ac,#b196ff);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}.section-open-eh-stu-ugc__avatar-img,.section-open-eh-stu-ugc__avatar-fallback{width:100%;height:100%;border-radius:50%;object-fit:cover}.section-open-eh-stu-ugc__avatar-fallback{display:block;background:#ffffff59}.section-open-eh-stu-ugc__avatar-name{max-width:calc(82 * 100vw / 393);color:var(--ugc-white);font-family:var(--Shokz-Sans-Text, "Shokz Sans Text");font-size:calc(15 * 100vw / 393);font-weight:400;line-height:1.3;text-align:center}.section-open-eh-stu-ugc__viewport{position:relative}.section-open-eh-stu-ugc__card{position:relative;color:var(--ugc-white)}.section-open-eh-stu-ugc__card:not(.is-active){display:none}.section-open-eh-stu-ugc__media{position:relative;height:calc(480 * 100vw / 393);overflow:hidden;border-radius:calc(12 * 100vw / 393);background:#1c1c1c;box-shadow:0 calc(6 * 100vw / 393) calc(32 * 100vw / 393) calc(-8 * 100vw / 393) #0000000a,0 calc(18 * 100vw / 393) calc(48 * 100vw / 393) calc(-20 * 100vw / 393) #00000014}.section-open-eh-stu-ugc__poster{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}.section-open-eh-stu-ugc__card:not(.is-active) .section-open-eh-stu-ugc__poster{opacity:1}.section-open-eh-stu-ugc__video{display:block;width:100%;height:100%;object-fit:cover;background:#1c1c1c}.section-open-eh-stu-ugc__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(180deg,#00000059,#0000 28%);pointer-events:none}.section-open-eh-stu-ugc__shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s ease}.section-open-eh-stu-ugc__card:not(.is-playing) .section-open-eh-stu-ugc__shade{opacity:1}.section-open-eh-stu-ugc__play,.section-open-eh-stu-ugc__nav,.section-open-eh-stu-ugc__icon-btn{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:50%;background:var(--ugc-glass);color:var(--ugc-white);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer}.section-open-eh-stu-ugc__play{position:absolute;top:50%;left:50%;z-index:3;width:calc(48 * 100vw / 393);height:calc(48 * 100vw / 393);transform:translate(-50%,-50%)}.section-open-eh-stu-ugc__play svg{width:calc(24 * 100vw / 393);height:calc(24 * 100vw / 393)}.section-open-eh-stu-ugc__card.is-playing .section-open-eh-stu-ugc__play{opacity:0;pointer-events:none}.section-open-eh-stu-ugc__play .section-open-eh-stu-ugc__icon-pause,.section-open-eh-stu-ugc__card.is-playing .section-open-eh-stu-ugc__play .section-open-eh-stu-ugc__icon-play{display:none}.section-open-eh-stu-ugc__card.is-playing .section-open-eh-stu-ugc__play .section-open-eh-stu-ugc__icon-pause{display:block}.section-open-eh-stu-ugc__nav{position:absolute;top:50%;z-index:4;width:calc(36 * 100vw / 393);height:calc(36 * 100vw / 393);color:#404040;background:#ffffffb8;transform:translateY(-50%)}.section-open-eh-stu-ugc__nav svg{width:calc(36 * 100vw / 393);height:calc(36 * 100vw / 393)}.section-open-eh-stu-ugc__nav--prev{left:calc(16 * 100vw / 393)}.section-open-eh-stu-ugc__nav--next{right:calc(16 * 100vw / 393)}.section-open-eh-stu-ugc__nav--next svg{transform:rotate(180deg)}.section-open-eh-stu-ugc__tools{position:absolute;top:calc(16 * 100vw / 393);right:calc(16 * 100vw / 393);z-index:4;display:flex;flex-direction:column;gap:calc(20 * 100vw / 393)}.section-open-eh-stu-ugc__tools--panel{display:none}.section-open-eh-stu-ugc__icon-btn{width:calc(32 * 100vw / 393);height:calc(32 * 100vw / 393)}.section-open-eh-stu-ugc__icon-btn svg{width:calc(20 * 100vw / 393);height:calc(20 * 100vw / 393);display:block}.section-open-eh-stu-ugc__card .section-open-eh-stu-ugc__icon-sound,.section-open-eh-stu-ugc__card:not(.is-muted) .section-open-eh-stu-ugc__icon-muted{display:none}.section-open-eh-stu-ugc__card:not(.is-muted) .section-open-eh-stu-ugc__icon-sound{display:block}.section-open-eh-stu-ugc__tag{display:inline-flex;align-items:center;justify-content:center;padding:calc(4 * 100vw / 393) calc(8 * 100vw / 393);border-radius:calc(4 * 100vw / 393);background:#000c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ugc-white);font-family:var(--Shokz-Sans-Text, "Shokz Sans Text");font-size:calc(14 * 100vw / 393);font-weight:400;line-height:calc(18 * 100vw / 393);letter-spacing:0;white-space:nowrap}.section-open-eh-stu-ugc__tag--media{position:absolute;top:calc(16 * 100vw / 393);left:calc(16 * 100vw / 393);z-index:4}.section-open-eh-stu-ugc__tag--panel{display:none}.section-open-eh-stu-ugc__progress{position:absolute;top:calc((480 - 4) * 100vw / 393);right:0;left:0;z-index:5;height:calc(4 * 100vw / 393);overflow:hidden;border-radius:0 0 calc(12 * 100vw / 393) calc(12 * 100vw / 393);background:var(--ugc-track);pointer-events:none}.section-open-eh-stu-ugc__progress-bar{display:block;width:var(--ugc-progress, 0%);height:100%;border-radius:0 calc(6 * 100vw / 393) calc(6 * 100vw / 393) 0;background:var(--ugc-brand)}.section-open-eh-stu-ugc__card:not(.is-active) .section-open-eh-stu-ugc__progress-bar{width:0}.section-open-eh-stu-ugc__panel{padding:calc(8 * 100vw / 393);margin-block:16px 54px}.section-open-eh-stu-ugc__creator{display:none}.section-open-eh-stu-ugc__quote{margin:0;color:var(--ugc-white);font-family:"Young Serif",serif;font-size:calc(16 * 100vw / 393);font-weight:400;line-height:1.2;letter-spacing:.16px;word-break:break-word}.section-open-eh-stu-ugc__play:focus-visible,.section-open-eh-stu-ugc__nav:focus-visible,.section-open-eh-stu-ugc__icon-btn:focus-visible,.section-open-eh-stu-ugc__avatar:focus-visible{outline:2px solid var(--ugc-white);outline-offset:2px}@media screen and (max-width:767px){.section-open-eh-stu-ugc__avatar:not(.is-active) .section-open-eh-stu-ugc__avatar-img{border:1px solid var(--BG-page, #FFF)}}@media screen and (min-width:768px){.section-open-eh-stu-ugc{padding-top:var(--ugc-pt-pc, 128px);padding-bottom:var(--ugc-pb-pc, 96px);background:var(--ugc-white)}.section-open-eh-stu-ugc__heading{margin:0 0 min(32px,calc(32 * 100vw / 1440));padding:0;color:var(--ugc-ink);font-size:min(42px,calc(42 * 100vw / 1440));line-height:min(50px,calc(50 * 100vw / 1440))}.section-open-eh-stu-ugc__surface{margin:0;padding:0;background:transparent}.section-open-eh-stu-ugc__avatars,.section-open-eh-stu-ugc__nav,.section-open-eh-stu-ugc__tools--media,.section-open-eh-stu-ugc__tag--media{display:none}.section-open-eh-stu-ugc__viewport{overflow:visible}.section-open-eh-stu-ugc__track{display:flex;align-items:stretch;gap:min(24px,calc(24 * 100vw / 1440));transition:transform .45s ease}.section-open-eh-stu-ugc__card,.section-open-eh-stu-ugc__card:not(.is-active){display:flex;flex:0 0 min(384px,calc(384 * 100vw / 1440));width:min(384px,calc(384 * 100vw / 1440));height:min(683px,calc(683 * 100vw / 1440));overflow:hidden;border-radius:min(12px,calc(12 * 100vw / 1440));background:#1c1c1c;cursor:pointer;transition:flex-basis .45s ease,width .45s ease}.section-open-eh-stu-ugc__card.is-active{flex-basis:min(768px,calc(768 * 100vw / 1440));width:min(768px,calc(768 * 100vw / 1440));background:linear-gradient(180deg,#b3c0c8,#3b6162);cursor:default}.section-open-eh-stu-ugc__media{flex:1 1 auto;height:100%;min-width:0;border-radius:0;box-shadow:none}.section-open-eh-stu-ugc__media:after{opacity:0}.section-open-eh-stu-ugc__card.is-active .section-open-eh-stu-ugc__media:after{opacity:1}.section-open-eh-stu-ugc__shade{bottom:min(6px,calc(6 * 100vw / 1440))}.section-open-eh-stu-ugc__card.is-active .section-open-eh-stu-ugc__shade{opacity:0}.section-open-eh-stu-ugc__card:not(.is-playing) .section-open-eh-stu-ugc__shade{opacity:1}.section-open-eh-stu-ugc__card.is-active.is-playing .section-open-eh-stu-ugc__shade{opacity:0}.section-open-eh-stu-ugc__play{width:min(48px,calc(48 * 100vw / 1440));height:min(48px,calc(48 * 100vw / 1440));opacity:1;pointer-events:auto}.section-open-eh-stu-ugc__card.is-playing .section-open-eh-stu-ugc__play{opacity:1;pointer-events:auto}.section-open-eh-stu-ugc__play svg{width:min(24px,calc(24 * 100vw / 1440));height:min(24px,calc(24 * 100vw / 1440))}.section-open-eh-stu-ugc__panel{display:flex;flex:0 0 0;flex-direction:column;justify-content:space-between;width:0;min-width:0;height:100%;padding:min(24px,calc(24 * 100vw / 1440)) 0 min(32px,calc(32 * 100vw / 1440));overflow:hidden;opacity:0;visibility:hidden;transition:flex-basis .45s ease,width .45s ease,opacity .3s ease;margin-block:0}.section-open-eh-stu-ugc__card.is-active .section-open-eh-stu-ugc__panel{flex:0 0 50%;width:50%;opacity:1;visibility:visible}.section-open-eh-stu-ugc__creator{display:flex;flex-direction:column;align-items:center;gap:min(4px,calc(4 * 100vw / 1440))}.section-open-eh-stu-ugc__panel-top{display:flex;align-items:flex-start;justify-content:space-between;padding:0 min(24px,calc(24 * 100vw / 1440))}.section-open-eh-stu-ugc__creator-photo{box-sizing:border-box;display:flex;width:min(100px,calc(100 * 100vw / 1440));height:min(100px,calc(100 * 100vw / 1440));border-radius:50%;overflow:hidden}.section-open-eh-stu-ugc__creator-img,.section-open-eh-stu-ugc__creator-fallback{width:100%;height:100%;border-radius:50%;object-fit:cover}.section-open-eh-stu-ugc__creator-fallback{display:block;background:#ffffff59}.section-open-eh-stu-ugc__creator-name{color:var(--ugc-white);font-family:var(--Shokz-Sans-Text, "Shokz Sans Text");font-size:min(16px,calc(16 * 100vw / 1440));font-weight:400;line-height:min(22px,calc(22 * 100vw / 1440));letter-spacing:.16px;text-align:center}.section-open-eh-stu-ugc__tools--panel{position:static;display:flex;flex-direction:column;gap:min(20px,calc(20 * 100vw / 1440));margin-left:auto}.section-open-eh-stu-ugc__tools--panel .section-open-eh-stu-ugc__icon-btn{width:min(48px,calc(48 * 100vw / 1440));height:min(48px,calc(48 * 100vw / 1440))}.section-open-eh-stu-ugc__tools--panel .section-open-eh-stu-ugc__icon-btn svg{width:min(24px,calc(24 * 100vw / 1440));height:min(24px,calc(24 * 100vw / 1440))}.section-open-eh-stu-ugc__quote{display:flex;flex:1 1 auto;align-items:center;min-height:0;margin:min(24px,calc(24 * 100vw / 1440)) 0;padding:0 min(40px,calc(40 * 100vw / 1440));overflow:auto;font-size:min(28px,calc(28 * 100vw / 1440));line-height:min(36px,2.5vw)}.section-open-eh-stu-ugc__panel-foot{padding:0 min(24px,calc(24 * 100vw / 1440))}.section-open-eh-stu-ugc__card.is-active .section-open-eh-stu-ugc__tag--panel{display:inline-flex;padding:min(4px,calc(4 * 100vw / 1440)) min(8px,calc(8 * 100vw / 1440));border-radius:min(4px,calc(4 * 100vw / 1440));font-size:min(20px,calc(20 * 100vw / 1440));line-height:min(28px,calc(28 * 100vw / 1440));letter-spacing:.16px}.section-open-eh-stu-ugc__card:not(.is-active) .section-open-eh-stu-ugc__tag--media{display:inline-flex;top:auto;bottom:min(32px,calc(32 * 100vw / 1440));left:min(24px,calc(24 * 100vw / 1440));padding:min(4px,calc(4 * 100vw / 1440)) min(8px,calc(8 * 100vw / 1440));border-radius:min(4px,calc(4 * 100vw / 1440));font-size:min(20px,calc(20 * 100vw / 1440));line-height:min(28px,calc(28 * 100vw / 1440));letter-spacing:.16px}.section-open-eh-stu-ugc__progress{top:auto;bottom:0;height:min(6px,calc(6 * 100vw / 1440));border-radius:0}.section-open-eh-stu-ugc__progress-bar{border-radius:0 min(6px,calc(6 * 100vw / 1440)) min(6px,calc(6 * 100vw / 1440)) 0}}@media(hover:hover)and (min-width:768px){.section-open-eh-stu-ugc__icon-btn:hover,.section-open-eh-stu-ugc__play:hover{background:#d4d7de80}.section-open-eh-stu-ugc__card:not(.is-active):hover .section-open-eh-stu-ugc__shade{background:#00000059}}@media(prefers-reduced-motion:reduce){.section-open-eh-stu-ugc__track,.section-open-eh-stu-ugc__card,.section-open-eh-stu-ugc__panel,.section-open-eh-stu-ugc__shade{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/334/assets/section-open-eh-stu-ugc.css.map */