.vp-vto__stage.is-rear-camera video,
.vp-vto__stage.is-rear-camera canvas { transform: none; }

.vp-vto__camera-switch { position: absolute; z-index: 5; top: 16px; right: 16px; display: inline-flex; min-height: 36px; padding: 0 12px; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(19,21,27,.62); color: #fff; font: inherit; font-size: 11px; font-weight: 700; backdrop-filter: blur(10px); }
.vp-vto__camera-switch[hidden] { display: none !important; }
.vp-vto__camera-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vp-vto__camera-switch:hover,
.vp-vto__camera-switch:focus-visible { background: rgba(19,21,27,.82); color: #fff; }
.vp-vto__camera-switch:disabled { opacity: .55; cursor: wait; }

.vp-vto__actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.vp-vto__actions form { margin: 0; }
.vp-vto__wishlist { display: flex; width: 50px; height: 48px; padding: 0 !important; align-items: center; justify-content: center; border: 1px solid #cbc7fa !important; border-radius: 7px; background: #f1efff !important; color: var(--vto-purple) !important; font: inherit; box-shadow: none !important; transform: none !important; }
.vp-vto__wishlist svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.vp-vto__wishlist span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vp-vto__wishlist .vp-vto__heart { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: #4b38ee; font-family: Arial, sans-serif; font-size: 25px; font-weight: 400; line-height: 1; }
.vp-vto__wishlist:hover,
.vp-vto__wishlist:focus,
.vp-vto__wishlist:focus-visible,
.vp-vto__wishlist:active { border-color: #b7b0f5 !important; background: #e7e3ff !important; color: var(--vto-purple-dark) !important; box-shadow: none !important; transform: none !important; }
.vp-vto__wishlist.is-saved { border-color: #bcb6fa !important; background: #e9e6ff !important; color: var(--vto-purple-dark) !important; }
.vp-vto__wishlist.is-saved:hover,
.vp-vto__wishlist.is-saved:focus-visible { border-color: #aaa2f4 !important; background: #dfdbff !important; color: #3025b3 !important; }
.vp-vto .vp-vto__actions form button[type="submit"].vp-vto__wishlist { padding: 0 !important; border: 1px solid #cbc7fa !important; background: #f1efff !important; background-color: #f1efff !important; color: var(--vto-purple) !important; }
.vp-vto .vp-vto__actions form button[type="submit"].vp-vto__wishlist:hover,
.vp-vto .vp-vto__actions form button[type="submit"].vp-vto__wishlist:focus,
.vp-vto .vp-vto__actions form button[type="submit"].vp-vto__wishlist:focus-visible,
.vp-vto .vp-vto__actions form button[type="submit"].vp-vto__wishlist:active { border-color: #b7b0f5 !important; background: #e7e3ff !important; background-color: #e7e3ff !important; color: var(--vto-purple-dark) !important; box-shadow: none !important; transform: none !important; }
.vp-vto .vp-vto__actions form button[type="submit"].vp-vto__wishlist.is-saved { border-color: #bcb6fa !important; background: #e9e6ff !important; background-color: #e9e6ff !important; color: var(--vto-purple-dark) !important; }
.vp-vto__wishlist.is-saved svg { fill: currentColor; }

.vp-vto__related { margin-top: 30px; padding: 25px; border: 1px solid var(--vto-line); border-radius: 16px; background: #fff; }
.vp-vto__related-heading { display: flex; margin-bottom: 18px; align-items: end; justify-content: space-between; gap: 24px; }
.vp-vto__related-heading h2 { margin: 5px 0 0; font-size: 25px; letter-spacing: -.035em; }
.vp-vto__related-heading p { margin: 6px 0 0; color: var(--vto-muted); font-size: 12px; }
.vp-vto__related-nav { display: flex; gap: 8px; }
.vp-vto__related-nav button { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid #d7d9df; border-radius: 50%; background: #fff; color: #252832; font: inherit; font-size: 25px; line-height: 1; }
.vp-vto__related-nav button:hover,
.vp-vto__related-nav button:focus-visible { border-color: #aaa3ff; background: #f7f6ff; color: var(--vto-purple); }
.vp-vto__related-track { display: flex; padding: 1px 1px 8px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.vp-vto__related-card { position: relative; flex: 0 0 calc((100% - 60px)/6); min-width: 175px; padding: 10px; border: 1px solid var(--vto-line); border-radius: 10px; background: #fff; color: var(--vto-ink); font: inherit; text-align: left; scroll-snap-align: start; }
.vp-vto__related-card > span { display: grid; height: 112px; margin-bottom: 10px; place-items: center; background: #f1f1ef; }
.vp-vto__related-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vp-vto__related-card strong,
.vp-vto__related-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-vto__related-card strong { font-size: 12px; }
.vp-vto__related-card small { margin-top: 4px; color: #6f7480; font-size: 11px; }
.vp-vto__related-card em { display: inline-block; margin: 0 0 5px; color: #766bf4; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.vp-vto__related-card:hover,
.vp-vto__related-card:focus-visible,
.vp-vto__related-card.is-active { border-color: #aaa3ff; background: #faf9ff; box-shadow: 0 0 0 1px #d8d4ff; }
.vp-vto button:focus-visible,
.vp-vto a:focus-visible,
.vp-vto input:focus-visible { outline: 3px solid rgba(75,56,238,.25); outline-offset: 3px; }

@media (min-width: 1051px) {
    .vp-vto__stage { aspect-ratio: 16/10; max-height: 680px; }
    .vp-vto__panel { position: sticky; top: 118px; }
}

.vp-vto__fit { transition: opacity .2s ease; }
.vp-vto__fit.is-disabled { opacity: .5; }
.vp-vto__fit.is-disabled input,
.vp-vto__fit.is-disabled button { cursor: not-allowed; }
.vp-vto__control input[type="range"] { height: 20px; appearance: none; -webkit-appearance: none; background: transparent; }
.vp-vto__control input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: #d9dbe2; }
.vp-vto__control input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; appearance: none; -webkit-appearance: none; border: 3px solid #fff; border-radius: 50%; background: var(--vto-purple); box-shadow: 0 0 0 1px var(--vto-purple), 0 2px 6px rgba(31,26,87,.24); }
.vp-vto__control input[type="range"]::-moz-range-track { height: 4px; border: 0; border-radius: 999px; background: #d9dbe2; }
.vp-vto__control input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--vto-purple); }
.vp-vto__control input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: var(--vto-purple); box-shadow: 0 0 0 1px var(--vto-purple), 0 2px 6px rgba(31,26,87,.24); }

@media (max-width: 767px) {
    .vp-vto__camera-switch { top: 12px; right: 12px; width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; }
    .vp-vto__camera-switch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .vp-vto__related { margin-top: 18px; padding: 17px 14px; }
    .vp-vto__related-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .vp-vto__related-heading h2 { font-size: 22px; }
    .vp-vto__related-nav { display: none; }
    .vp-vto__related-card { flex-basis: 142px; }
    .vp-vto__related-card > span { height: 96px; }
}

@media (min-width: 768px) and (max-width: 1050px) {
    .vp-vto__stage { aspect-ratio: 16/10; }
    .vp-vto__panel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .vp-vto__fit { padding-right: 10px; }
    .vp-vto__actions { grid-column: 1/-1; }
    .vp-vto__related-card { flex-basis: calc((100% - 36px)/4); }
}

@media (max-width: 480px) {
    .vp-vto__stage { min-height: 410px; aspect-ratio: 4/5; }
    .vp-vto__state { padding: 22px 16px; }
    .vp-vto__state h2 { font-size: 25px; }
    .vp-vto__actions { grid-template-columns: minmax(0,1fr) 48px; }
    .vp-vto__related-card { flex-basis: 72vw; max-width: 245px; }
    .vp-vto__related-card > span { height: 145px; }
}

/* Storefront-style frame carousel */
.vp-vto__related { position: relative; margin-top: 58px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.vp-vto__related-heading { margin-bottom: 22px; padding-right: 0; align-items: flex-start; }
.vp-vto__related-heading h2 { font-size: clamp(26px,2.2vw,34px); }
.vp-vto__related-heading p { font-size: 13px; }
.vp-vto__related-track { margin: 0 -8px; padding: 0; gap: 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 8px; }
.vp-vto__related-track::-webkit-scrollbar { display: none; }
.vp-vto__related-card { flex: 0 0 25%; min-width: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.vp-vto__related-card > span { position: relative; height: auto; margin: 0 0 14px; aspect-ratio: 1/1.08; overflow: hidden; background: #efefef; }
.vp-vto__related-card img { padding: 0; object-fit: cover; }
.vp-vto__related-card strong { padding: 0 3px; color: #202126; font-size: 15px; font-weight: 700; line-height: 1.3; }
.vp-vto__related-card small { padding: 0 3px; margin-top: 6px; color: #606570; font-size: 13px; }
.vp-vto__related-card em { position: absolute; z-index: 3; top: 12px; left: 20px; display: none; margin: 0; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: #3227b8; box-shadow: 0 3px 12px rgba(20,20,30,.08); font-size: 9px; backdrop-filter: blur(8px); }
.vp-vto__related-card.is-active em { display: inline-flex; }
.vp-vto__related-card:hover,
.vp-vto__related-card:focus-visible,
.vp-vto__related-card.is-active { border: 0; background: transparent; box-shadow: none; }
.vp-vto__related-card:hover > span,
.vp-vto__related-card:focus-visible > span { box-shadow: inset 0 0 0 1px rgba(23,23,27,.22); }
.vp-vto__related-card.is-active > span { box-shadow: inset 0 0 0 2px var(--vto-purple); }
.vp-vto__related-nav { position: absolute; z-index: 8; top: calc(50% + 14px); right: 0; left: 0; display: block; height: 0; pointer-events: none; }
.vp-vto__related-nav button { position: absolute; display: grid; width: 52px; height: 52px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(38,38,40,.6); color: transparent; box-shadow: 0 5px 18px rgba(20,20,25,.18); font-size: 0; line-height: 1; pointer-events: auto; backdrop-filter: blur(3px); }
.vp-vto__related-nav button::before { position: absolute; top: 50%; left: 50%; content: ""; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform-origin: center; }
.vp-vto__related-nav button:first-child::before { transform: translate(-38%,-50%) rotate(-135deg); }
.vp-vto__related-nav button:last-child::before { transform: translate(-62%,-50%) rotate(45deg); }
.vp-vto__related-nav button:first-child { left: 10px; }
.vp-vto__related-nav button:last-child { right: 10px; }
.vp-vto__related-nav button:hover,
.vp-vto__related-nav button:focus-visible { border: 0; background: rgba(28,28,30,.74); color: #fff; }
.vp-vto__related-nav button:disabled { opacity: 0; visibility: hidden; pointer-events: none; }

@media (min-width: 1200px) and (max-width: 1450px) {
    .vp-vto__related-card { flex-basis: 25%; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .vp-vto__related-card { flex-basis: 33.3333%; }
    .vp-vto__related-nav { display: none; }
}

@media (max-width: 767px) {
    .vp-vto__related { margin-top: 34px; padding: 0; }
    .vp-vto__related-heading { margin-bottom: 16px; }
    .vp-vto__related-heading h2 { font-size: 25px; }
    .vp-vto__related-track { margin-right: -10px; margin-left: -4px; scroll-padding-inline: 4px; }
    .vp-vto__related-card { flex: 0 0 78%; max-width: 300px; padding: 0 6px; }
    .vp-vto__related-card > span { height: auto; aspect-ratio: 1/1.05; margin-bottom: 12px; }
    .vp-vto__related-card strong { font-size: 14px; }
    .vp-vto__related-card em { top: 10px; left: 16px; }

    .vp-vto__header { width: 100%; padding: 18px 17px; gap: 13px; border: 1px solid #e4e2f5; border-radius: 14px; background: linear-gradient(140deg,#fff 15%,#f4f2ff 100%); }
    .vp-vto__header h1 { max-width: 330px; margin-top: 8px; font-size: clamp(30px,9vw,38px); font-weight: 650; line-height: .98; letter-spacing: -.05em; }
    .vp-vto__header p { max-width: 350px; font-size: 13px; line-height: 1.5; }
    .vp-vto__header .vp-vto__eyebrow { font-size: 10px; }
    .vp-vto__header .vp-vto__back { min-height: 38px; background: rgba(255,255,255,.78); }
    .vp-vto__fit { display: none; }
    .vp-vto__face-guide { bottom: 92px; }
    .vp-vto__mobile-position { position: absolute; z-index: 5; right: 10px; bottom: 10px; left: 10px; display: grid; min-width: 0; padding: 11px 12px; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 11px; border: 1px solid rgba(255,255,255,.35); border-radius: 11px; background: rgba(255,255,255,.9); box-shadow: 0 8px 26px rgba(18,20,27,.15); backdrop-filter: blur(14px); }
    .vp-vto__mobile-position[hidden] { display: none !important; }
    .vp-vto__mobile-position label { min-width: 0; margin: 0; }
    .vp-vto__mobile-position label > span { display: flex; margin-bottom: 5px; align-items: center; justify-content: space-between; gap: 8px; }
    .vp-vto__mobile-position b { color: #242631; font-size: 11px; }
    .vp-vto__mobile-position output { color: #747987; font-size: 9px; }
    .vp-vto__mobile-position input { width: 100%; height: 18px; margin: 0; accent-color: var(--vto-purple); }
    .vp-vto__mobile-position button { min-width: 52px !important; height: 34px; padding: 0 10px !important; border: 1px solid #d4d0fb !important; border-radius: 7px !important; background: #f4f2ff !important; color: #3e32c9 !important; font: inherit; font-size: 10px !important; font-weight: 750 !important; }
    .vp-vto__mobile-position button:hover,
    .vp-vto__mobile-position button:focus-visible { border-color: #b9b3f6 !important; background: #eae7ff !important; color: #3025b3 !important; }
    .vp-vto__panel { min-width: 0; overflow: hidden; }
    .vp-vto__actions { width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr) 48px; gap: 8px; }
    .vp-vto__actions form { width: 48px; min-width: 0; }
    .vp-vto__actions .vp-vto__product-action { width: 100%; min-width: 0 !important; padding: 0 12px !important; background: var(--vto-purple) !important; color: #fff !important; }
    .vp-vto__actions .vp-vto__product-action:hover,
    .vp-vto__actions .vp-vto__product-action:focus-visible { border-color: var(--vto-purple-dark) !important; background: var(--vto-purple-dark) !important; color: #fff !important; }
    .vp-vto__actions .vp-vto__wishlist { width: 48px !important; min-width: 48px !important; max-width: 48px; padding: 0 !important; border-color: #cbc7fa !important; background: #f1efff !important; color: var(--vto-purple) !important; }
    .vp-vto__actions .vp-vto__wishlist:hover,
    .vp-vto__actions .vp-vto__wishlist:focus-visible { border-color: #b7b0f5 !important; background: #e7e3ff !important; color: var(--vto-purple-dark) !important; }
}