/* Impact owns typography, native buttons, colors and radii. */
.vft{display:block;background:rgb(var(--background));color:rgb(var(--text-color))}
.vft>.container{margin-inline:0}
.vft[hidden],.vft [hidden]{display:none}
.vft__intro{margin-block-end:var(--spacing-6)}
.vft__intro>p,.vft__panel>div>p:first-child{text-transform:uppercase;color:rgb(var(--text-color));opacity:1}
.vft__layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--spacing-16);align-items:center}
.vft__views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-4);align-items:start}
.vft__garment{position:relative;width:100%;max-width:390px;margin-inline:auto;aspect-ratio:5 / 6}
.vft__garment img{width:100%;height:100%;object-fit:contain}
.vft__hotspot{position:absolute;left:var(--vft-x);top:var(--vft-y);transform:translate(-50%,-50%);width:var(--spacing-12);height:var(--spacing-12);display:grid;place-items:center;border:0;background:transparent;cursor:pointer;touch-action:manipulation}
.vft__hotspot span{display:grid;place-items:center;width:var(--spacing-7);height:var(--spacing-7);border:1px solid currentColor;border-radius:50%;background:rgb(var(--background));color:rgb(var(--text-color))}
.vft__hotspot[aria-pressed=true] span{background:rgb(var(--text-color));color:rgb(var(--background))}
.vft__hotspot:hover span{outline:1px solid rgb(var(--text-color));outline-offset:3px}
.vft button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.vft__pagination{display:none;margin-block-start:var(--spacing-2);gap:var(--spacing-1)}
.vft__dot{width:var(--spacing-8);height:var(--spacing-8);padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.vft__dot::before{content:"";width:8px;height:8px;border:1px solid rgb(var(--text-color));border-radius:50%;background:transparent}
.vft__dot[aria-pressed=true]::before{background:rgb(var(--text-color))}
.vft__hint{margin-block-start:var(--spacing-3)}
.vft__panel+.vft__panel{margin-block-start:var(--spacing-8)}
.vft[data-enhanced] .vft__panel{margin-block-start:0}
.vft__detail{height:260px;background-repeat:no-repeat}
.vft__layout{position:relative}
.vft__panel{padding:var(--spacing-8);border-radius:var(--rounded-lg);background:rgb(var(--text-color) / 0.06)}
.vft__detail{border-radius:0;background-color:transparent;mix-blend-mode:multiply}
.vft__connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.vft__connector path{fill:none;stroke:rgb(var(--text-color) / 0.4);stroke-width:1;vector-effect:non-scaling-stroke}
.vft__hotspot{z-index:2}
@media(max-width:699px){.vft__visual{margin-inline:var(--container-gutter)}.vft__views{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:var(--spacing-3);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none}.vft__views::-webkit-scrollbar{display:none}.vft__garment{max-width:290px;scroll-snap-align:start;scroll-snap-stop:always}.vft__pagination{display:flex}}
@media(max-width:999px){.vft__connector{display:none}.vft__panel{padding:var(--spacing-6)}}
@media(max-width:999px){.vft__layout{gap:var(--spacing-8)}}
@media(max-width:699px){.vft__layout{grid-template-columns:minmax(0,1fr);gap:var(--spacing-5)}.vft__intro{margin-block-end:var(--spacing-4)}.vft__detail{height:220px}}
