.youp-3d{--youp-3d-bg: 8 18 20;--youp-3d-grid: 155 234 162;--youp-3d-accent: 155 234 162;--youp-3d-card-border: 255 255 255;--youp-3d-card-bg: 12 28 30;--youp-3d-detail-width: min(22rem, 36vw);--youp-3d-stage-gap: clamp(1rem, 2vw, 2rem);--youp-3d-stage-inner-max: 95rem;--youp-3d-viewer-aspect-num: 17;--youp-3d-viewer-max-width: min(56rem, 100%);position:relative;overflow:clip;overflow-anchor:none}.youp-3d__bg-grid{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;opacity:var(--youp-3d-grid-opacity, .14);background-image:linear-gradient(rgb(var(--youp-3d-grid) / .4) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--youp-3d-grid) / .4) 1px,transparent 1px);background-size:48px 48px;transform:perspective(420px) rotateX(58deg) scale(1.38);transform-origin:center 70%;-webkit-mask-image:linear-gradient(to bottom,black 0%,black 55%,transparent 94%);mask-image:linear-gradient(to bottom,black 0%,black 55%,transparent 94%)}.youp-3d__inner{position:relative;z-index:1}.youp-3d__intro{max-width:min(100%,72rem);margin-inline:auto;margin-bottom:clamp(1.75rem,3.5vw,2.75rem);text-align:center}.youp-3d__intro-row{display:grid;gap:clamp(1.25rem,3vw,2.75rem);align-items:start;text-align:start}@media screen and (min-width:750px){.youp-3d__intro{text-align:start}.youp-3d__intro-row{display:flex;align-items:end;justify-content:flex-start;gap:20px}.youp-3d__intro-row .youp-3d__heading{width:44%}.youp-3d__intro-row .youp-3d__sub{width:40%;font-size:1.25rem}}.youp-3d__heading.rte{margin:0;font-family:var(--heading-font-family);font-weight:var(--heading-font-weight);font-size:clamp(2rem,4.2vw,60px);line-height:1.04;letter-spacing:calc(var(--heading-letter-spacing, 0) * 1.05);color:rgb(var(--youp-3d-heading, var(--text-color)))}.youp-3d__heading.rte p{margin:0 0 .35em}.youp-3d__heading.rte p:last-child{margin-bottom:0}.youp-3d__heading.rte em,.youp-3d__heading.rte :is(em,i){color:rgb(var(--youp-3d-accent));font-style:normal}.youp-3d__sub.rte{margin:0;max-width:none;font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.55;font-weight:400;color:rgb(var(--text-color))}.youp-3d__sub.rte p{margin:0 0 .65em}.youp-3d__sub.rte p:last-child{margin-bottom:0}.youp-3d__layout{display:block}.youp-3d__stage-panel{position:relative;width:100%;padding:0;background:transparent;border:none;box-shadow:none;overflow:visible}.youp-3d__stage-panel:before{display:none}.youp-3d__stage-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:clamp(.85rem,2.2vw,1.35rem);min-height:0}@media screen and (min-width:1000px){.youp-3d__stage-main{gap:0}}.youp-3d__connector{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:block;pointer-events:none;overflow:visible;color:rgb(var(--youp-3d-accent));opacity:0;transition:opacity .28s ease}.youp-3d__connector.is-visible{opacity:1}.youp-3d__connector line{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgb(var(--youp-3d-accent) / .45))}@media screen and (max-width:999px){.youp-3d__connector{display:none}}@media(prefers-reduced-motion:reduce){.youp-3d__connector{transition:none}}.youp-3d__viewer-wrap{position:relative;z-index:1;display:block;margin-inline:auto;border-radius:0;overflow:hidden;background:transparent;border:none;box-shadow:none;min-height:0;min-width:0;aspect-ratio:calc(var(--youp-3d-viewer-aspect-num, 17) / 10) / 1;width:100%;max-width:min(100%,calc(var(--youp-3d-viewer-max-h, 32rem) * var(--youp-3d-viewer-aspect-num, 17) / 10));max-height:var(--youp-3d-viewer-max-h, clamp(17rem, 52vw, 32rem));height:auto}@media screen and (min-width:1000px){.youp-3d__stage-panel{max-width:var(--youp-3d-stage-inner-max);margin-inline:auto}.youp-3d__stage-main{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;min-height:0}.youp-3d__viewer-wrap{flex:0 1 auto;width:min(100%,calc(var(--youp-3d-viewer-max-h, 32rem) * var(--youp-3d-viewer-aspect-num, 17) / 10),var(--youp-3d-viewer-max-width));max-width:min(100%,calc(var(--youp-3d-viewer-max-h, 32rem) * var(--youp-3d-viewer-aspect-num, 17) / 10),var(--youp-3d-viewer-max-width));margin-inline:auto}.youp-3d__layout--detail-left .youp-3d__viewer-wrap{transform:translate(var(--youp-3d-viewer-shift, 4%))}.youp-3d__layout--detail-right .youp-3d__viewer-wrap{transform:translate(calc(-1 * var(--youp-3d-viewer-shift, 4%)))}}@media screen and (min-width:1200px){.youp-3d{--youp-3d-viewer-max-width: min(1000px, 100%)}}.youp-3d__detail{position:relative;z-index:4;min-width:0;min-height:0;width:100%}@media screen and (min-width:1000px){.youp-3d__detail{position:absolute;top:50%;z-index:5;width:var(--youp-3d-detail-width);max-width:min(var(--youp-3d-detail-width),calc(100% - 2rem));transform:translateY(-50%);pointer-events:none}.youp-3d__layout--detail-right .youp-3d__detail{right:0;left:auto}.youp-3d__layout--detail-left .youp-3d__detail{left:0;right:auto}.youp-3d__detail-surface{position:relative;pointer-events:auto;min-height:10rem;width:100%}}model-viewer.youp-3d__model{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;min-height:0;touch-action:none;background:transparent;outline:none;--poster-color: transparent}.youp-3d__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:2rem;text-align:center;color:rgb(var(--text-color) / .65);font-size:var(--text-sm)}.youp-3d__toolbar{position:absolute;inset-inline:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem 1rem;padding:.55rem .75rem .7rem;border-top:0;background:transparent;box-shadow:none;pointer-events:none}.youp-3d__toolbar>*{pointer-events:auto}.youp-3d__toolbar:not(:has(>*)){display:none}.youp-3d__360{display:inline-flex;align-items:center;gap:.4rem;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--text-color) / .55)}.youp-3d__360 svg{width:1.35rem;height:1.35rem;flex-shrink:0;opacity:.85}.youp-3d__fs{margin-inline-start:auto;border:1px solid rgb(var(--text-color) / .22);border-radius:999px;padding:.35rem .85rem;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--text-color) / .85);background:transparent;cursor:pointer;transition:border-color .2s,color .2s;box-shadow:none}.youp-3d__fs:hover{border-color:rgb(var(--youp-3d-accent) / .45);color:rgb(var(--youp-3d-accent))}.youp-3d:not(.youp-3d--model-loaded):not(.youp-3d--mv-error) model-viewer.youp-3d__model [data-youp-3d-hotspot]{opacity:0;pointer-events:none}.youp-3d__load-error{display:none;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:1.25rem 1.5rem;text-align:center;font-size:var(--text-sm);line-height:1.5;color:rgb(var(--text-color) / .85);place-content:center}.youp-3d--mv-error .youp-3d__load-error:not([hidden]){display:grid}.youp-3d--mv-error model-viewer.youp-3d__model{display:none!important}model-viewer.youp-3d__model [data-youp-3d-hotspot]{--youp-hotspot-size: 1rem;position:relative;display:grid;place-items:center;width:calc(var(--youp-hotspot-size) * 2.35);height:calc(var(--youp-hotspot-size) * 2.35);padding:0;border:none;background:transparent;cursor:pointer;transition:transform .2s ease}model-viewer.youp-3d__model [data-youp-3d-hotspot]:after{--youp-hotspot-halo: calc(var(--youp-hotspot-size) * 2.35);content:"";position:absolute;top:calc(50% - var(--youp-hotspot-halo) / 2);left:calc(50% - var(--youp-hotspot-halo) / 2);width:var(--youp-hotspot-halo);height:var(--youp-hotspot-halo);border-radius:999px;background:radial-gradient(50% 50% at 50% 50%,rgb(var(--youp-3d-accent) / .14),rgb(var(--background) / .22));pointer-events:none;z-index:0;transition:opacity .22s ease,transform .22s ease,background .22s ease}model-viewer.youp-3d__model [data-youp-3d-hotspot]:focus-visible{outline:2px solid rgb(var(--youp-3d-accent));outline-offset:2px}model-viewer.youp-3d__model [data-youp-3d-hotspot]:hover{transform:scale(1.12)}model-viewer.youp-3d__model [data-youp-3d-hotspot]:hover:after{background:radial-gradient(50% 50% at 50% 50%,rgb(var(--youp-3d-accent) / .22),rgb(var(--background) / .28))}model-viewer.youp-3d__model [data-youp-3d-hotspot].is-active{transform:scale(1)}model-viewer.youp-3d__model [data-youp-3d-hotspot]:not(.is-active):after{opacity:1;visibility:visible}model-viewer.youp-3d__model [data-youp-3d-hotspot].is-active:after{opacity:0;visibility:hidden;transform:scale(.01)}.youp-3d__hotspot-x{position:absolute;z-index:2;top:50%;left:50%;width:1.35rem;height:1.35rem;border-radius:999px;display:grid;place-items:center;font-size:.9375rem;font-weight:700;line-height:1;color:rgb(var(--youp-3d-heading, 2 25 27));background:rgb(var(--youp-3d-accent) / .95);border:1px solid rgb(var(--youp-3d-accent));box-shadow:0 0 0 1px #00000024,0 0 12px rgb(var(--youp-3d-accent) / .4);opacity:0;transform:translate(-50%,-50%) scale(.65);transition:opacity .22s ease,transform .24s cubic-bezier(.34,1.56,.64,1),width .22s ease,height .22s ease,font-size .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}model-viewer.youp-3d__model [data-youp-3d-hotspot].is-active .youp-3d__hotspot-x{opacity:1;transform:translate(-50%,-50%) scale(1);width:1.65rem;height:1.65rem;font-size:1.1875rem;color:#000}.youp-3d__hotspot-dot{position:relative;z-index:1;width:var(--youp-hotspot-size, 1rem);height:var(--youp-hotspot-size, 1rem);border-radius:999px;border:0;background:#fffffff5;box-shadow:0 0 0 1px rgb(var(--youp-3d-heading, 255 255 255) / .12),0 0 0 2px rgb(var(--youp-3d-hotspot-fill, var(--youp-3d-accent)) / .48);transition:opacity .22s ease,transform .22s ease,box-shadow .22s ease,background .22s ease}model-viewer.youp-3d__model [data-youp-3d-hotspot].is-active .youp-3d__hotspot-dot{opacity:0;transform:scale(.65);box-shadow:none;background:transparent}.youp-3d__detail-surface{position:relative;display:flex;flex-direction:column;gap:.75rem;padding-top:.15rem;filter:none}.youp-3d__card-close{display:none!important}.youp-3d__detail-card{position:relative;border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;opacity:0;visibility:hidden;pointer-events:none;transform:translate(.5rem) scale(.985);transition:opacity .22s ease,transform .26s cubic-bezier(.22,1,.36,1),visibility 0s linear .22s}.youp-3d__detail-card--panel-left{transform:translate(-.5rem) scale(.985)}.youp-3d__detail-card--panel-right{transform:translate(.5rem) scale(.985)}@media screen and (min-width:1000px){.youp-3d__detail-card{position:absolute;inset:0 auto auto 0;width:100%}}.youp-3d__detail-card.is-active{opacity:1;visibility:visible;transform:translate(0) scale(1);pointer-events:auto;transition:opacity .22s ease,transform .26s cubic-bezier(.22,1,.36,1),visibility 0s}.youp-3d__detail-media{position:relative;aspect-ratio:16 / 10;background:#00000026;border-radius:var(--rounded-sm, .5rem);margin:0;overflow:hidden;border:1px solid rgb(var(--youp-3d-card-border, var(--text-color)) / .18)}.youp-3d__detail-img{width:100%;height:100%;object-fit:cover;display:block}.youp-3d__detail-body{padding:.75rem .35rem 0;display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center}.youp-3d__detail-title{margin:0;font-family:var(--heading-font-family);font-weight:700;font-size:clamp(1rem,2.8vw,1.34rem);line-height:1.25;color:rgb(var(--youp-3d-card-title, var(--text-color)))}.youp-3d__detail-desc.rte{margin:0;font-size:clamp(.8125rem,2.1vw,.9375rem);line-height:1.45;color:rgb(var(--youp-3d-card-desc, var(--youp-3d-accent)))}@media screen and (min-width:1000px){.youp-3d__detail-title{font-size:1.375rem;line-height:1.2}.youp-3d__detail-desc.rte{font-size:.9375rem;line-height:1.45}}.youp-3d__detail-desc.rte p{margin:0 0 .5em}.youp-3d__detail-desc.rte p:last-child{margin-bottom:0}.youp-3d__empty-detail{padding:1.5rem;text-align:center;font-size:var(--text-sm);color:rgb(var(--text-color) / .55);border:1px dashed rgb(var(--text-color) / .2);border-radius:.75rem}@media screen and (max-width:999px){.youp-3d{overflow-x:clip;overflow-y:visible}.youp-3d__layout--detail-left .youp-3d__viewer-wrap,.youp-3d__layout--detail-right .youp-3d__viewer-wrap{transform:none}.youp-3d__stage-panel{display:flex;flex-direction:column;align-items:stretch;gap:clamp(.85rem,3.5vw,1.25rem)}.youp-3d__stage-main{width:100%}.youp-3d__detail{position:relative;z-index:6;order:1;width:100%;padding-inline:0;pointer-events:auto}.youp-3d__detail-surface{position:relative;display:block;filter:none;min-height:0;width:100%}.youp-3d--has-open-hotspot .youp-3d__detail-surface{min-height:0}.youp-3d__detail-card:not(.is-active){display:none!important;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:0}.youp-3d__detail-card.is-active{display:block;position:relative;inset:auto;width:100%;max-width:24rem;margin-inline:auto;opacity:1;visibility:visible;transform:translateY(0) scale(1);max-height:none;overflow:visible;-webkit-overflow-scrolling:touch;border-radius:var(--rounded-sm, .5rem);background:rgb(var(--youp-3d-card-bg, var(--background)) / .92);border:1px solid rgb(var(--youp-3d-card-border, var(--text-color)) / .2);padding:.65rem .65rem .75rem}.youp-3d__detail-card--panel-left.is-active,.youp-3d__detail-card--panel-right.is-active{transform:translateY(0) scale(1)}.youp-3d__card-close{display:grid!important;position:absolute;top:.45rem;right:.45rem;z-index:2;width:2rem;height:2rem;place-items:center;border-radius:999px;border:1px solid rgb(var(--youp-3d-card-border, var(--text-color)) / .35);background:rgb(var(--youp-3d-card-bg, var(--background)) / .85);color:rgb(var(--youp-3d-card-title, var(--text-color)));font-size:1.25rem;line-height:1;cursor:pointer}model-viewer.youp-3d__model [data-youp-3d-hotspot]{--youp-hotspot-size: .8125rem;z-index:1}model-viewer.youp-3d__model [data-youp-3d-hotspot].is-active{z-index:3}}@media(prefers-reduced-motion:reduce){.youp-3d__detail-card,.youp-3d__hotspot-dot,.youp-3d__hotspot-x,model-viewer.youp-3d__model [data-youp-3d-hotspot]{transition:none!important}.youp-3d__detail-card.is-active{transform:none;opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/36/assets/youp-3d-model-hotspots.css.map */