/* OVELLE — Soleil in 3D (chapter on soleil.html, modal from the product card on index.html) */
.v3d { padding: clamp(80px, 9vw, 136px) 0 0; }
.v3d__head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--gutter); margin-bottom: clamp(32px, 3.6vw, 52px); }
.v3d__cap { margin-top: 12px; font-size: 16px; line-height: 24px; color: #1d1c1c; max-width: 30em; }

.v3d__stage { position: relative; height: clamp(520px, 80vh, 900px); background: var(--ground); overflow: hidden; }
.v3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; opacity: 0; transition: opacity .8s var(--ease); -webkit-tap-highlight-color: transparent; }
.v3d__canvas:active { cursor: grabbing; }
.v3d__stage.is-live .v3d__canvas { opacity: 1; }
.v3d__poster { position: absolute; left: 50%; top: 50%; width: auto; height: 78%; max-width: 92%; object-fit: contain; transform: translate(-50%, -50%); transition: opacity .8s var(--ease);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.v3d__stage.is-live .v3d__poster { opacity: 0; pointer-events: none; }
.v3d__hint { position: absolute; left: 0; right: 0; top: 24px; text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
.v3d__stage.is-live .v3d__hint { opacity: 1; }
.v3d__stage.is-touched .v3d__hint { opacity: 0; }

/* options: plain uppercase labels, a hairline under the chosen one */
.v3d__ctrl { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px var(--gutter) 0; }
.v3d__line { font-size: 16px; line-height: 24px; color: #1d1c1c; min-height: 24px; }
.v3d__groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(28px, 4vw, 64px); }
.v3d__group { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.v3d__label { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; padding-right: clamp(4px, .8vw, 10px); border-right: 1px solid var(--line); margin-right: 2px; line-height: 20px; padding-right: 16px; }
.v3d__group button { position: relative; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); padding: 12px 0; min-height: 44px; transition: color .4s var(--ease); white-space: nowrap; }
.v3d__group button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.v3d__group button:hover, .v3d__group button.is-on { color: var(--ink); }
.v3d__group button.is-on::after { transform: scaleX(1); }
.is-fallback .v3d__ctrl .v3d__groups, .is-fallback .v3d__hint { display: none; }

/* product card link */
.card .card__3d { justify-self: center; align-self: center; width: auto; margin: 10px auto 0; font-family: var(--sans); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; font-weight: 500; color: var(--ink); }

/* modal */
.v3d-lock, .v3d-lock body { overflow: hidden; }
.v3d-modal { position: fixed; inset: 0; z-index: 9995; display: flex; flex-direction: column; background: var(--ground); opacity: 0; transition: opacity .45s var(--ease-t); }
.v3d-modal.is-open { opacity: 1; }
.v3d-modal__bar { flex: none; height: 64px; display: flex; align-items: center; justify-content: center; position: relative; background: #fff; border-bottom: 1px solid var(--line); padding: 0 var(--gutter); }
.v3d-modal__t { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.v3d-modal__x { position: absolute; right: calc(var(--gutter) - 12px); top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; }
.v3d-modal .v3d__stage { flex: 1; height: auto; min-height: 0; }
.v3d-modal .v3d__ctrl { flex: none; background: #fff; border-top: 1px solid var(--line); padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom)); gap: 8px; }

@media (max-width: 640px) {
  .v3d__stage { height: min(72svh, 620px); min-height: 420px; }
  .v3d__ctrl { gap: 10px; }
  .v3d__groups { flex-direction: column; align-items: center; gap: 12px; }
  .v3d__group { flex-wrap: wrap; justify-content: center; gap: 0 22px; }
  .v3d__label { flex-basis: 100%; text-align: center; border: 0; padding: 0; margin: 0 0 -6px; font-size: 13px; }
  .v3d-modal__bar { height: 56px; }
  .v3d-modal .v3d__stage { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .v3d__canvas, .v3d__poster, .v3d-modal { transition: none; }
}
.v3d__reset { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); min-height: 44px; padding: 0 4px; background: linear-gradient(currentColor, currentColor) left calc(100% - 12px) / 0 1px no-repeat; transition: color .4s var(--ease), background-size .4s var(--ease); }
.v3d__reset:hover { color: var(--ink); background-size: 100% 1px; }
/* the options arrive after the ring does, one row at a time */
.v3d__ctrl > * { transition: opacity .7s var(--ease), transform .9s var(--ease); }
.js .v3d:not(.is-live) .v3d__ctrl > * { opacity: 0; transform: translateY(8px); }
.v3d.is-live .v3d__ctrl > :nth-child(2) { transition-delay: .08s; }
.v3d.is-live .v3d__ctrl > :nth-child(3) { transition-delay: .16s; }
.v3d.is-fallback .v3d__ctrl > * { opacity: 1; transform: none; }
.v3d.is-fallback .v3d__reset { display: none; }
.is-fallback .v3d__reset { display: none; }