/* ============================================================
   DSM PACIFIC — Virtual Try-On popup styles (TRIMMED, self-contained)
   ------------------------------------------------------------
   Contains ONLY the try-on/popup rules extracted from the
   prototype's virtual-global.css (stage, camera/photo/3D layers,
   loader, overlay controls, metal + finger pickers, popup shell,
   responsive). The unrelated prototype CSS (landing pages, quote
   flow, diamond cards, steppers, workbench, saved designs) is NOT
   included, so this cannot affect the DSM portal pages.

   THEMING: the popup accent is driven by --vt-accent, set inline
   per stone type (#a47e43 lab-grown / #007D79 natural). We scope
   the prototype's green tokens to --vt-accent inside .pt-modal so
   every var(--dsm-green) usage retints automatically; a few
   hard-coded accents are overridden explicitly at the bottom.
   ============================================================ */

/* ---- token shim (only the tokens the popup actually references) ---- */
:root {
    --dsm-green: #00c9a7;
    --dsm-green-dark: #038e8b;
    --dsm-green-soft: rgba(0, 201, 167, 0.14);
    --dsm-gold: #d8b878;
    --text-primary: #f4f8f7;
    --text-secondary: #b8c9c6;
    --text-muted: #7fa19c;
    --text-on-accent: #052a24;
    --font-heading: 'Caudex', 'Playfair Display', serif;
    --font-body: 'Poppins', 'Roboto', sans-serif;
    --vx-line: rgba(255, 255, 255, 0.10);
    --vx-line-soft: rgba(255, 255, 255, 0.06);
    --vx-panel: rgba(255, 255, 255, 0.045);
    --vx-panel-strong: rgba(6, 24, 27, 0.55);
    --vx-radius: 18px;
    --radius-pill: 50px;
    --speed: 0.28s;
}

/* ===== [extracted] Section 4 — TRY-ON STAGE ===== */
/* ============================================================
   4. TRY-ON STAGE
   ============================================================ */
.tryon-stage {
    position: relative;
    border-radius: var(--vx-radius);
    background: var(--vx-stage-bg);
    border: 1px solid var(--vx-line);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tryon-stage .model-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.tryon-placeholder {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--text-secondary);
    max-width: 320px;
    padding: 20px;
}

.tryon-placeholder .ph-ico {
    font-size: 42px;
    color: var(--dsm-green);
    margin-bottom: 14px;
}

.tryon-placeholder h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.tryon-placeholder p {
    font-size: 13px;
    color: var(--text-muted);
}

/* the jewellery overlay that "sits" on the model */
.tryon-overlay {
    position: absolute;
    z-index: 3;
    width: 34%;
    max-width: 220px;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
    animation: vx-float 4.5s ease-in-out infinite;
    pointer-events: none;
}

.tryon-overlay--center {
    top: 30%;
    left: 33%;
}

@keyframes vx-float {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(6px); }
}

.tryon-tracking-dot {
    position: absolute;
    z-index: 4;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dsm-green);
    box-shadow: 0 0 0 6px rgba(0, 201, 167, 0.22);
    animation: vx-pulse 1.8s ease-in-out infinite;
}

@keyframes vx-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(0, 201, 167, 0.22); }
    50% { box-shadow: 0 0 0 11px rgba(0, 201, 167, 0.05); }
}

.tryon-liveflag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(6, 24, 27, 0.7);
    border: 1px solid var(--vx-line);
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    backdrop-filter: blur(6px);
}

.tryon-liveflag .rec {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5f6d;
    animation: vx-pulse 1.4s infinite;
}

.tryon-quickmenu {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tryon-quickmenu button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--vx-line);
    background: rgba(6, 24, 27, 0.7);
    color: var(--text-primary);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all var(--speed) ease;
}

.tryon-quickmenu button:hover {
    border-color: var(--dsm-green);
    color: var(--dsm-green);
}

/* source tabs: Live Camera / Mobile Camera / Upload Photo */
.tryon-sources {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.tryon-source {
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: var(--radius-field);
    border: 1px solid var(--border-soft);
    background: var(--vx-panel-strong);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--speed) ease;
}

.tryon-source i {
    font-size: 17px;
    color: var(--text-muted);
}

.tryon-source strong {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.tryon-source small {
    font-size: 10.5px;
    color: var(--text-muted);
}

.tryon-source:hover {
    border-color: var(--dsm-green);
}

.tryon-source.active {
    border-color: var(--dsm-green);
    background: var(--dsm-green-soft);
}

.tryon-source.active i {
    color: var(--dsm-green);
}

/* capture / thumbnails */
.tryon-captures {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.tryon-thumb {
    width: 62px;
    height: 62px;
    border-radius: 12px;
    border: 1px solid var(--vx-line);
    background: var(--vx-panel-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--speed) ease;
}

.tryon-thumb.add {
    border-style: dashed;
}

.tryon-thumb:hover {
    border-color: var(--dsm-green);
    color: var(--dsm-green);
}


/* ===== [extracted] Section 16 — WORKING CAMERA / UPLOAD / 3D ===== */
/* ============================================================
   16. TRY-ON — WORKING CAMERA / UPLOAD / 3D  (v2)
   ============================================================ */
/* stage layers */
.tryon-stage .cam-video,
.tryon-stage .cam-photo,
.tryon-stage .cam-3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1;
}

.tryon-stage .cam-video,
.tryon-stage .cam-photo {
    object-fit: cover;
}

/* selfie mirror for live camera */
.tryon-stage.is-mirrored .cam-video {
    transform: scaleX(-1);
}

.tryon-stage.mode-live .cam-video,
.tryon-stage.mode-photo .cam-photo,
.tryon-stage.mode-3d .cam-3d {
    display: block;
}

.tryon-stage.mode-live .tryon-placeholder,
.tryon-stage.mode-photo .tryon-placeholder,
.tryon-stage.mode-3d .tryon-placeholder {
    display: none;
}

/* hide the jewellery overlay while in 3D mode */
.tryon-stage.mode-3d .tryon-jewel {
    display: none !important;
}

.cam-3d {
    cursor: grab;
}

.cam-3d:active {
    cursor: grabbing;
}

/* draggable jewellery sprite */
.tryon-jewel {
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    width: 40%;
    max-width: none;
    transform-origin: center center;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
    transition: filter var(--speed) ease;
}

.tryon-jewel.is-secondary {
    z-index: 5;
}

.tryon-jewel.dragging {
    cursor: grabbing;
    filter: drop-shadow(0 6px 14px rgba(0, 201, 167, 0.5));
}

.tryon-jewel.is-hidden {
    display: none !important;
}

/* AR overlay — transparent Three.js canvas that renders the real .glb model
   fitted onto the tracked body part (finger / ears / neck / wrist). Sits above
   the camera/photo, below the AI flag & controls. Shown only when a model is live. */
.tryon-ar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
    display: none;
}

.tryon-ar.show {
    display: block;
}

.tryon-stage.mode-3d .tryon-ar {
    display: none !important;
}

/* AR fit tuning panel (dev/setup) — press "g" or ?tune=1 */
.ar-tune {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    width: 260px;
    padding: 14px 16px 12px;
    background: rgba(8, 26, 28, 0.94);
    border: 1px solid rgba(0, 201, 167, 0.35);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    color: #e8fbf6;
    font-size: 12px;
    display: none;
}

.ar-tune.show {
    display: block;
}

.ar-tune-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ar-tune-head strong {
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: #00c9a7;
}

.ar-tune-head [data-cat] {
    text-transform: capitalize;
    color: #e8fbf6;
}

.ar-tune-head [data-close] {
    background: none;
    border: none;
    color: #9fd8ce;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ar-tune-row {
    display: grid;
    grid-template-columns: 58px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin: 7px 0;
}

.ar-tune-row span {
    color: #b7d8d1;
}

.ar-tune-row input[type="range"] {
    width: 100%;
    accent-color: #00c9a7;
}

.ar-tune-row output {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #e8fbf6;
}

.ar-tune-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ar-tune-foot code {
    display: block;
    font-size: 10.5px;
    line-height: 1.4;
    color: #8fe6d4;
    word-break: break-word;
}

.ar-tune-foot [data-copy] {
    align-self: flex-start;
    padding: 5px 12px;
    background: rgba(0, 201, 167, 0.16);
    border: 1px solid rgba(0, 201, 167, 0.4);
    border-radius: 8px;
    color: #00c9a7;
    cursor: pointer;
    font-size: 11.5px;
}

.ar-tune-foot [data-copy]:hover {
    background: rgba(0, 201, 167, 0.26);
}

/* AI lock badge */
.tryon-aiflag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 7;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(6, 24, 27, 0.72);
    border: 1px solid rgba(0, 201, 167, 0.4);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #7ff0da;
    backdrop-filter: blur(6px);
}

.tryon-aiflag.show {
    display: inline-flex;
}

.tryon-aiflag .rec {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dsm-green);
    animation: vx-pulse 1.4s infinite;
}

/* Big centred loader — visible "it's rendering" indicator over the stage */
.tryon-loader {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(4, 14, 15, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #eafff9;
}
.tryon-loader[hidden] { display: none; }
.tryon-loader-spin {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.16);
    border-top-color: var(--dsm-green);
    animation: vx-spin 0.9s linear infinite;
}
.tryon-loader-txt {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.tryon-loader-pct {
    font-size: 20px;
    font-weight: 700;
    color: var(--dsm-green);
    min-height: 22px;
    font-variant-numeric: tabular-nums;
}
@keyframes vx-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
    .tryon-loader-spin { width: 60px; height: 60px; border-width: 5px; }
    .tryon-loader-txt { font-size: 13.5px; }
    .tryon-loader-pct { font-size: 17px; }
}

.tryon-aiflag.searching {
    color: var(--dsm-gold);
    border-color: rgba(216, 184, 120, 0.4);
}

.tryon-aiflag.searching .rec {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid rgba(216, 184, 120, 0.3);
    border-top-color: var(--dsm-gold);
    animation: vx-spin 0.7s linear infinite;
}

@keyframes vx-spin { to { transform: rotate(360deg); } }

/* mode buttons (3): reuse tryon-source look via .tryon-modes */
.tryon-modes {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.tryon-mode {
    flex: 1 1 120px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: var(--radius-field);
    border: 1px solid var(--border-soft);
    background: var(--vx-panel-strong);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--speed) ease;
}

.tryon-mode i {
    font-size: 17px;
    color: var(--text-muted);
}

.tryon-mode strong {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.tryon-mode small {
    font-size: 10.5px;
    color: var(--text-muted);
}

.tryon-mode:hover {
    border-color: var(--dsm-green);
}

.tryon-mode.active {
    border-color: var(--dsm-green);
    background: var(--dsm-green-soft);
}

.tryon-mode.active i {
    color: var(--dsm-green);
}

/* toolbar under stage: capture / download / reset / auto-fit */
.tryon-toolbar {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-soft);
    background: transparent;
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--speed) ease;
}

.tool-btn i {
    color: var(--text-muted);
}

.tool-btn:hover {
    border-color: var(--dsm-green);
    color: var(--text-primary);
}

.tool-btn:hover i {
    color: var(--dsm-green);
}

.tool-btn.is-on {
    border-color: transparent;
    background: linear-gradient(135deg, var(--dsm-green), var(--dsm-green-dark));
    color: var(--text-on-accent);
}

.tool-btn.is-on i {
    color: var(--text-on-accent);
}

.tool-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* hidden native file input */
.tryon-file {
    display: none;
}

/* adjust sliders */
.adjust-row {
    display: grid;
    grid-template-columns: 70px 1fr 44px;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.adjust-row label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.adjust-row output {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: right;
}

input[type="range"].vx-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    outline: none;
    cursor: pointer;
}

input[type="range"].vx-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dsm-green), var(--dsm-green-dark));
    border: 2px solid #0a2426;
    box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.18);
}

input[type="range"].vx-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dsm-green);
    border: 2px solid #0a2426;
}

/* captured gallery reuse .tryon-captures / .tryon-thumb, add remove btn */
.tryon-thumb.captured {
    border-style: solid;
    border-color: var(--dsm-green);
    padding: 0;
}

.tryon-thumb.captured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
}

/* small helper text */
.tryon-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 10px;
    line-height: 1.5;
}

.tryon-3d-controls {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 6;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    background: rgba(6, 24, 27, 0.72);
    border: 1px solid var(--vx-line);
    font-size: 11.5px;
    color: var(--text-secondary);
    backdrop-filter: blur(6px);
}

.tryon-stage.mode-3d .tryon-3d-controls {
    display: inline-flex;
}

/* type-strip thumbnails use real images now */
.type-chip .type-ico img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* shared toast (used by tryon.js / virtual.js) */
.vx-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%) translateY(8px);
    z-index: 200;
    background: linear-gradient(135deg, var(--dsm-green), var(--dsm-green-dark));
    color: var(--text-on-accent);
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 13px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 30px rgba(0, 201, 167, 0.35);
    opacity: 0;
    transition: opacity var(--speed) ease, transform var(--speed) ease;
    max-width: 90vw;
    text-align: center;
}

.vx-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* hide the jewellery overlay until a camera/photo/3D mode is active */
.tryon-stage:not(.mode-live):not(.mode-photo):not(.mode-3d) .tryon-jewel {
    display: none !important;
}


/* ===== [extracted] Section 17 — REAL PRODUCT PICKER (hidden hooks) ===== */
/* ============================================================
   17. TRY-ON — REAL PRODUCT PICKER
   ============================================================ */
.prod-group {
    display: none;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.prod-group.active {
    display: flex;
}

.prod-item {
    flex: 0 0 auto;
    width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 10px 6px 9px;
    border-radius: var(--radius-field);
    border: 1px solid var(--border-soft);
    background: var(--vx-panel-strong);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--speed) ease;
}

.prod-item .prod-thumb {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod-item .prod-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* thumbnails rendered from the real .glb get a soft dark disc so the gold pops */
.prod-item.has-model-thumb .prod-thumb {
    background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.35), transparent 72%);
    border-radius: 50%;
}

.prod-item .prod-name {
    font-size: 11px;
    font-weight: 500;
}

.prod-item:hover {
    border-color: var(--dsm-green);
    color: var(--text-primary);
}

.prod-item.active {
    border-color: var(--dsm-green);
    background: var(--dsm-green-soft);
    color: var(--text-primary);
}

/* real product overlays are photographic — soften the drop shadow */
.tryon-jewel.is-real {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}


/* ===== [extracted] Section 18 — REAL-IMAGE 3D VIEWER ===== */
/* ============================================================
   18. TRY-ON — REAL-IMAGE 3D VIEWER (CSS 3D turntable)
   ============================================================ */
.cam-3d { cursor: grab; }
.cam-3d:active { cursor: grabbing; }

.v3d-stage {
    position: absolute;
    inset: 0;
    perspective: 1150px;
    overflow: hidden;
}

.v3d-obj {
    position: absolute;
    top: 16%;
    left: 18%;
    width: 64%;
    height: 64%;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
}

.v3d-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.6));
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.v3d-shadow {
    position: absolute;
    left: 50%;
    bottom: 11%;
    width: 44%;
    height: 26px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
    filter: blur(7px);
    pointer-events: none;
}

/* "3D" badge on products that have a real .glb model */
.prod-item { position: relative; }
.prod-3d {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--dsm-green), var(--dsm-green-dark));
    color: var(--text-on-accent);
    line-height: 1;
}

/* Ring: hand (auto/left/right) + finger picker */
.ring-controls[hidden] { display: none; }

.seg-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.seg-btn {
    flex: 1;
    padding: 9px 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: #cfe6e0;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--speed) ease, background var(--speed) ease, color var(--speed) ease;
}

.seg-btn:hover { border-color: rgba(0, 201, 167, 0.4); }

.seg-btn.active {
    border-color: var(--dsm-green);
    background: rgba(0, 201, 167, 0.16);
    color: #eafff9;
    font-weight: 600;
}

.finger-seg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.finger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: #cfe6e0;
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color var(--speed) ease, background var(--speed) ease, transform var(--speed) ease;
}

.finger-btn:hover { border-color: rgba(0, 201, 167, 0.4); transform: translateY(-1px); }

.finger-btn.active {
    border-color: var(--dsm-green);
    background: rgba(0, 201, 167, 0.16);
    color: #eafff9;
    font-weight: 600;
}

.finger-ico {
    width: 22px;
    height: 22px;
    display: block;
}

.finger-ico .hf-off { fill: #5f7d78; transition: fill var(--speed) ease; }
.finger-ico .hf-on  { fill: #00c9a7; transition: fill var(--speed) ease; }

.finger-btn.active .finger-ico .hf-off { fill: #7fb0a8; }
.finger-btn.active .finger-ico .hf-on  { fill: #17e6c1; }


/* ===== [extracted] Metal / option swatches ===== */
/* ---- product options: metal / purity / size ---- */
.vt-metal-row {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.vt-metal-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--vx-line) inset, 0 3px 8px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    padding: 0;
    transition: transform var(--speed) ease, border-color var(--speed) ease;
}

.vt-metal-swatch:hover { transform: translateY(-1px); }
.vt-metal-swatch.is-active { border-color: var(--dsm-green); }

.vt-metal-swatch.vt-metal-yellow { background: linear-gradient(135deg, #f0d488, #cba13f); }
.vt-metal-swatch.vt-metal-white { background: linear-gradient(135deg, #f4f5f8, #cfd2da); }
.vt-metal-swatch.vt-metal-rose { background: linear-gradient(135deg, #f2c3ad, #d38f76); }
.vt-metal-swatch.vt-metal-platinum { background: linear-gradient(135deg, #e9ebef, #b9bdc7); }

.opt-selected {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.size-block { margin-top: 16px; }

.size-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vx-select {
    flex: 1;
    padding: 11px 14px;
    border-radius: 11px;
    background: var(--vx-stage-bg);
    border: 1px solid var(--vx-line-soft);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.size-guide {
    font-size: 12.5px;
    color: var(--dsm-green);
    text-decoration: none;
    white-space: nowrap;
}

.size-guide:hover { text-decoration: underline; }


/* ===== [extracted] Metal tint (2D overlay) ===== */
/* ============================================================
   METAL TINT (2D overlay + catalogue thumbnails). The 3D model
   is recoloured by material; flat images are tinted by filter.
   ============================================================ */
.vt-tone-yellow .tryon-jewel,
.vt-tone-yellow .prod-thumb img { filter: none; }

.vt-tone-white .tryon-jewel,
.vt-tone-white .prod-thumb img { filter: saturate(0.12) brightness(1.16) contrast(0.96); }

.vt-tone-rose .tryon-jewel,
.vt-tone-rose .prod-thumb img { filter: sepia(0.42) saturate(1.5) hue-rotate(-16deg) brightness(1.02); }

.vt-tone-platinum .tryon-jewel,
.vt-tone-platinum .prod-thumb img { filter: saturate(0.06) brightness(1.2) contrast(0.94); }


/* ===== [extracted] TRY-ON POPUP shell + overlay controls + responsive ===== */
/* ---- try-on popup ---- */
.pt-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 12, 13, 0.78);
    backdrop-filter: blur(5px);
}
/* keep the popup hidden until product.js opens it (scoped; replaces the
   prototype's global [hidden]{display:none!important} which was not extracted) */
.pt-modal[hidden] { display: none !important; }
body.pt-open { overflow: hidden; }

.pt-box {
    width: 70vw;
    max-width: 1120px;
    height: 86vh;
    max-height: 820px;
    background: var(--vx-panel-strong);
    border: 1px solid var(--vx-line-soft);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--vx-line-soft);
}
.pt-head strong { font-size: 16px; }
.pt-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.pt-close:hover { color: var(--text-primary); }

.pt-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0;
}

.pt-body .tryon-stage {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: #05100f;
}

.pt-side {
    padding: 20px;
    border-left: 1px solid var(--vx-line-soft);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pt-modes { display: flex; gap: 10px; }
.pt-modes .tryon-mode {
    flex: 1;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    font-size: 13px;
}

.pt-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pt-actions .ss-btn { width: 100%; justify-content: center; }
.pt-actions .tool-btn { width: 100%; justify-content: center; }

@media (max-width: 860px) {
    .pt-box { width: 92vw; height: 90vh; }
    .pt-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .pt-body .tryon-stage { min-height: 46vh; }
    .pt-side { border-left: none; border-top: 1px solid var(--vx-line-soft); }
}

@media (max-width: 640px) {
    .pb-hero h1 { font-size: 26px; }
    .pb-logo { height: 50px; }
    .pb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
}

/* ============================================================
   TRY-ON POPUP — responsive rework (phones, tablets, desktop)
   Desktop: stage + fixed side rail. Small screens: stage on top,
   controls become a compact bottom bar.
   ============================================================ */
.pt-body { display: flex; }
.pt-body .tryon-stage { flex: 1 1 auto; min-width: 0; min-height: 0; height: auto; }
.pt-side { flex: 0 0 300px; }

@media (max-width: 900px) {
    .pt-box { width: 94vw; height: 92vh; max-height: none; }
    .pt-body { flex-direction: column; }
    .pt-body .tryon-stage { flex: 1 1 auto; width: 100%; }
    .pt-side {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        padding: 14px 16px;
        border-left: none;
        border-top: 1px solid var(--vx-line-soft);
        max-height: 46vh;
    }
    .pt-side .opt-label,
    .pt-side .opt-selected,
    .pt-side .tryon-hint { display: none; }
    .pt-modes { flex: 1 1 100%; }
    .vt-metal-row { margin: 0; }
    .pt-actions { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; margin: 0; gap: 10px; }
    .pt-actions .ss-btn,
    .pt-actions .tool-btn { flex: 1 1 150px; }
}

@media (max-width: 560px) {
    .pt-modal { padding: 0; }
    .pt-box { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
    .pt-head { padding: 13px 16px; }
    .vt-metal-swatch { width: 30px; height: 30px; }
}

/* ============================================================
   POPUP CONTROL ARRANGEMENT
   Capture & Download (left) · AI auto-fit (right) · Metal at bottom
   ============================================================ */
.pt-side { flex-basis: 320px; }

.pt-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 0;
}
.pt-actions .ss-btn { flex: 1 1 auto; }        /* Capture & download → left, grows */
.pt-actions .tool-btn { flex: 0 0 auto; white-space: nowrap; }  /* AI auto-fit → right */

.pt-metal { margin-top: auto; }                /* push metal to the bottom of the rail */
.pt-metal .opt-label { margin-bottom: 10px; }
.pt-metal .opt-selected { margin: 10px 0 0; }

@media (max-width: 900px) {
    /* bottom bar order: modes (row) · actions (Capture left / AI right) · metal (bottom) */
    .pt-actions { flex: 1 1 100%; }
    .pt-actions .ss-btn { flex: 1 1 auto; }
    .pt-actions .tool-btn { flex: 0 0 auto; }
    .pt-metal { margin-top: 0; flex: 1 1 100%; display: flex; align-items: center; gap: 12px; }
    .pt-metal .opt-label { display: none; }
    .pt-metal .opt-selected { display: block; margin: 0; font-size: 12.5px; color: var(--text-secondary); }
}

/* fit Capture (left) + AI (right) on one row at every size */
.pt-side { flex-basis: 340px; }
.pt-actions { flex-wrap: nowrap !important; gap: 8px; }
.pt-actions .ss-btn {
    flex: 1 1 0 !important;
    min-width: 0;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    padding: 12px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-actions .tool-btn {
    flex: 0 0 auto !important;
    font-size: 12px;
    padding: 12px 12px;
    white-space: nowrap;
}

.pt-actions .ss-btn,
.pt-actions .tool-btn { width: auto !important; }

/* group the buttons + metal together at the bottom of the rail (no middle gap) */
.pt-metal { margin-top: 0 !important; }
.pt-actions { margin-top: auto; }
.pt-side .tryon-hint { margin-top: 6px; }
@media (max-width: 900px) { .pt-actions { margin-top: 0; } }

/* ============================================================
   POPUP — FULL-WIDTH stage with floating overlay controls
   Camera (top-left) · 3D View (top-right) · Capture (bottom-left)
   · AI auto-fit (bottom-right) · Metal (bottom-centre)   [Ray-Ban style]
   ============================================================ */
.pt-body { display: block; position: relative; }
.pt-body .tryon-stage { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }

.pt-ov {
    position: absolute;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(6, 20, 21, 0.66);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #eafff9;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--speed) ease, background var(--speed) ease;
}
.pt-ov:hover { border-color: rgba(0, 201, 167, 0.5); }

.pt-ov-tl { top: 16px; left: 16px; }
.pt-ov-tr { top: 16px; right: 16px; }
.pt-ov-tc { top: 16px; left: 50%; transform: translateX(-50%); }
.pt-ov-bl { bottom: 16px; left: 16px; }
.pt-ov-br { bottom: 16px; right: 16px; }
.pt-ov-bc { bottom: 16px; left: 50%; transform: translateX(-50%); flex-direction: column; gap: 8px; padding: 11px 18px; }

.pt-ov[data-mode].active { border-color: var(--dsm-green); background: rgba(0, 201, 167, 0.24); color: #fff; }
.pt-ov.pt-primary { background: var(--dsm-green); border-color: transparent; color: var(--text-on-accent); font-weight: 600; letter-spacing: 0.3px; }
.pt-ov.pt-primary:hover { filter: brightness(1.06); }
.pt-ov[data-ai-toggle].is-on { border-color: var(--dsm-green); color: var(--dsm-green); }

/* icon-only round buttons */
.pt-ov.pt-ico {
    width: 52px; height: 52px;
    padding: 0; gap: 0;
    justify-content: center;
    font-size: 19px;
    border-radius: 50%;
}
.pt-ov.pt-ico i { line-height: 1; }
/* hover tooltip so an icon-only button still tells you what it does */
.pt-ov.pt-ico::after {
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    padding: 5px 9px;
    border-radius: 7px;
    background: rgba(4, 14, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #eafff9;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed) ease, transform var(--speed) ease;
}
.pt-ov.pt-ico:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* top-row buttons: drop the tooltip BELOW so it doesn't clip off the stage top */
.pt-ov-tl.pt-ico::after,
.pt-ov-tr.pt-ico::after,
.pt-ov-tc.pt-ico::after {
    bottom: auto; top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
.pt-ov-tl.pt-ico:hover::after,
.pt-ov-tr.pt-ico:hover::after,
.pt-ov-tc.pt-ico:hover::after { transform: translateX(-50%) translateY(0); }
/* bottom-LEFT / bottom-RIGHT corners: anchor the tooltip to the corner (not the
   button centre) so a long label like "Capture & Download" doesn't clip off the
   edge of the stage. */
.pt-ov-bl.pt-ico::after { left: 0; right: auto; transform: translateX(0) translateY(4px); }
.pt-ov-bl.pt-ico:hover::after { transform: translateX(0) translateY(0); }
.pt-ov-br.pt-ico::after { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.pt-ov-br.pt-ico:hover::after { transform: translateX(0) translateY(0); }
/* bottom-row buttons: show the tooltip above sits fine; keep primary readable */
.pt-ov.pt-ico.pt-primary { box-shadow: 0 6px 18px rgba(0, 201, 167, 0.35); }

.pt-metal-ov .vt-metal-row { display: flex; gap: 10px; margin: 0; }
.pt-metal-ov .vt-metal-swatch { width: 30px; height: 30px; }
.pt-metal-ov .opt-selected { margin: 0; font-size: 12px; color: #d7ece6; text-align: center; }

/* finger picker (rings only) — sits above the metal swatches */
.pt-finger { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pt-finger[hidden] { display: none; }
.pt-ov-cap { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #9fc4bd; }
.pt-metal-ov .finger-row { display: flex; gap: 6px; }
.finger-pill {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #eafff9;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--speed) ease, background var(--speed) ease;
}
.finger-pill:hover { border-color: rgba(0, 201, 167, 0.5); }
.finger-pill.active { background: var(--dsm-green); border-color: transparent; color: var(--text-on-accent); font-weight: 600; }
/* thin divider between finger + metal rows */
.pt-finger { padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }

/* keep the corners clean: status flag sits just below the top-centre reset button, drop the drag hint */
.pt-modal .tryon-aiflag { left: 50%; right: auto; top: 82px; transform: translateX(-50%); }
.pt-modal .tryon-stage .tryon-3d-controls,
.pt-modal .tryon-stage.mode-3d .tryon-3d-controls { display: none; }

/* mobile: lift the bottom buttons above the centred metal; shrink a touch */
@media (max-width: 700px) {
    .pt-ov { font-size: 12px; padding: 9px 12px; gap: 6px; }
    .pt-ov.pt-ico { width: 46px; height: 46px; font-size: 17px; padding: 0; }
    .pt-ov-bl, .pt-ov-br { bottom: 84px; }
    .pt-ov-bc { bottom: 14px; }
    .pt-metal-ov .vt-metal-swatch { width: 26px; height: 26px; }
    .pt-metal-ov .opt-selected { font-size: 11px; }
    .finger-pill { padding: 4px 9px; font-size: 11px; }
    .pt-metal-ov .finger-row { gap: 5px; }
}

/* ============================================================
   THEME OVERRIDES — brand accent (#a47e43 lab-grown / #007D79 natural)
   --vt-accent* vars are set inline on .pt-modal (popup) and on the
   launcher button, per stone type, by the Blade partials.
   ============================================================ */
.pt-modal {
    --dsm-green:      var(--vt-accent, #a47e43);
    --dsm-green-dark: var(--vt-accent, #a47e43);
    --dsm-green-soft: var(--vt-accent-soft, rgba(164, 126, 67, 0.16));
}
/* themed header bar */
.pt-modal .pt-head {
    background: var(--vt-accent, #a47e43);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
.pt-modal .pt-head strong { color: #ffffff; }
.pt-modal .pt-close { color: rgba(255, 255, 255, 0.85); }
.pt-modal .pt-close:hover { color: #ffffff; }
/* retint the hard-coded green accents that don't use the token */
.pt-modal .pt-ov[data-mode].active {
    background: var(--vt-accent-active, rgba(164, 126, 67, 0.24));
    border-color: var(--vt-accent, #a47e43);
}
.pt-modal .pt-ov:hover,
.pt-modal .finger-pill:hover { border-color: var(--vt-accent-line, rgba(164, 126, 67, 0.5)); }
.pt-modal .pt-ov.pt-ico.pt-primary { box-shadow: 0 6px 18px var(--vt-accent-glow, rgba(164, 126, 67, 0.4)); }

/* ============================================================
   LAUNCHER — single centered "Virtual Try-On" button placed at the
   top of the Listing / Details pages (NOT on product cards).
   Self-contained; brand accent set inline via --vt-accent.
   ============================================================ */
.vt-tryon-launch {
    display: flex;
    justify-content: center;
    margin: 14px 0 6px;
}
.vt-tryon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: 'Poppins', 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 11px 22px;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    background: var(--vt-accent, #a47e43);
    box-shadow: 0 8px 20px var(--vt-accent-glow, rgba(164, 126, 67, 0.32));
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vt-tryon-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px var(--vt-accent-glow, rgba(164, 126, 67, 0.42)); }
.vt-tryon-btn i { font-size: 15px; }

/* small, light chip centered at the TOP of a product image (per-card).
   Neutral white chip so it is NOT a heavy coloured block; only the icon
   + text use the brand accent (from the global :root --vt-accent vars). */
.vt-tryon-card {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--vt-accent, #a47e43);
    background: #ffffff;
    border: 1px solid var(--vt-accent-line, rgba(164, 126, 67, 0.5));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.vt-tryon-card i { font-size: 12px; }
.vt-tryon-card:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 5px 14px var(--vt-accent-glow, rgba(164, 126, 67, 0.32));
}

/* ============================================================
   Try-On button availability (live/international cards):
   hidden while the image is being checked and when the image is
   not suitable (can't cleanly remove the background) — the button
   only appears for images that will actually work.
   ============================================================ */
/* while checking: hidden but STILL laid out (visibility, not display:none) so the
   IntersectionObserver fires — display:none elements never intersect, which would
   leave the button stuck "checking" forever. */
.vt-checking { visibility: hidden !important; }
/* unsuitable: fully removed */
.vt-tryon-card.vt-off,
.vt-tryon-btn.vt-off { display: none !important; }

/* Keep the hidden engine hooks hidden — the .prod-group.active { display:flex }
   rule was overriding the [hidden] attribute and showing a stray empty bar. */
.prod-group[hidden],
[data-group="dyn"][hidden] { display: none !important; }