/* 3D viewer slot — transparent canvas, overlay controls */
/*.design-lab-desktop-main-container .design-lab-desktop-image-container .image-container {
  position: relative;
  flex: 1;
  min-height: 480px;
  height: calc(100% - 66px);
  padding: 20px 0 56px;
  box-sizing: border-box;
  background: transparent;
}

.design-lab-desktop-main-container .design-lab-desktop-image-container {
  display: flex;
  flex-direction: column;
  background: transparent;
}
*/
#ringCanvas {
    width: 100%;
    height: 100%;
    min-height: 440px;
    border-radius: 2px;
    overflow: hidden;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

    #ringCanvas.viewer-canvas-ready,
    #ringCanvas.viewer-updating {
        opacity: 1;
        visibility: visible;
    }

    #ringCanvas canvas,
    .ring-canvas-host,
    .ring-canvas-host canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
    }

.design-lab-viewer-status {
    position: absolute;
    left: 12px;
    bottom: 56px;
    margin: 0;
    padding: 6px 10px;
    font: 12px/1.4 Manrope, sans-serif;
    color: #003743;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}

    .design-lab-viewer-status[hidden] {
        display: none;
    }

    .design-lab-viewer-status.error {
        color: #9b1c1c;
    }

.luvansh-viewer-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.luvansh-viewer-overlay-left,
.luvansh-viewer-overlay-right {
    position: absolute;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.luvansh-viewer-overlay-left {
    left: 12px;
}

.luvansh-viewer-overlay-right {
    right: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100% - 110px);
}

.luvansh-viewer-overlay.is-zooming .luvansh-viewer-zoom {
    z-index: 6;
}

.luvansh-viewer-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 10px;
    font: 11px/1 Manrope, sans-serif;
    color: #003743;
    border-radius: 8px;
}

    .luvansh-viewer-zoom input[type='range'] {
        -webkit-appearance: none;
        appearance: none;
        width: 110px;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient( to right, #003743 0%, #003743 var(--zoom-pct, 48%), #c5ced1 var(--zoom-pct, 48%), #c5ced1 100% );
        outline: none;
        border: 1px solid rgba(0, 55, 67, 0.25);
    }

        .luvansh-viewer-zoom input[type='range']::-webkit-slider-runnable-track {
            height: 6px;
            border-radius: 999px;
            background: transparent;
        }

        .luvansh-viewer-zoom input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            margin-top: -4px;
            border-radius: 50%;
            background: #003743;
            border: 2px solid #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
            cursor: pointer;
        }

        .luvansh-viewer-zoom input[type='range']::-moz-range-track {
            height: 6px;
            border-radius: 999px;
            background: rgba(0, 55, 67, 0.18);
        }

        .luvansh-viewer-zoom input[type='range']::-moz-range-progress {
            height: 6px;
            border-radius: 999px;
            background: #003743;
        }

        .luvansh-viewer-zoom input[type='range']::-moz-range-thumb {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #003743;
            border: 2px solid #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
            cursor: pointer;
        }

.luvansh-viewer-icon-btn,
.luvansh-viewer-quality {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #003743;
    font: 12px/1 Manrope, sans-serif;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}

/* One frosted surface for every floating control, matching the RESET DESIGN
   and camera/bookmark/share clusters at the top of the panel. These sit over
   the render, so they are translucent and blur what passes behind rather than
   masking it with solid white.

   backdrop-filter samples the composited result underneath, so it blurs the
   WebGL canvas even though that canvas lives in a shadow root this stylesheet
   cannot otherwise reach. Where the property is unsupported the rule degrades
   to plain translucent white, which still carries 11px text at this alpha. */
.luvansh-viewer-zoom,
.luvansh-viewer-icon-btn,
.luvansh-viewer-quality {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 1px 6px rgba(0, 33, 41, 0.08);
}

    .luvansh-viewer-icon-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* Firmer glass on hover rather than an opaque fill, which would snap the
   blur off under the cursor. */
    .luvansh-viewer-icon-btn:hover,
    .luvansh-viewer-quality:hover {
        background: rgba(255, 255, 255, 0.75);
    }

    /* Deliberately opaque: 360° while spinning is a selected state, and it has to
   separate from its frosted neighbours at a glance. */
    .luvansh-viewer-icon-btn.active {
        background: #003743;
        color: #fff;
        border-color: #003743;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .luvansh-viewer-quality select {
        border: none;
        background: transparent;
        color: inherit;
        font: inherit;
        font-weight: 600;
        padding: 0;
        cursor: pointer;
    }

/* Scoped to the shells on purpose — one class was not enough to win.
   `.image-container:fullscreen` is two classes worth of specificity, and both
   of the rules it has to override are heavier:

     design_lab.style.css  .design-lab-desktop-main-container
                           .design-lab-desktop-image-container
                           .image-container            -> width/height, 3 classes
     further down THIS file .design-lab-mobile-main-container
                           .main-image-container       -> background: transparent

   So going full screen kept the desktop container at height: calc(100% - 66px)
   and left the mobile one transparent. A transparent element in the top layer
   shows the browser's ::backdrop, which is black — hence the black screen on
   mobile, and a black 66px band under the ring on desktop. */
.design-lab-desktop-main-container .design-lab-desktop-image-container .image-container:fullscreen,
.design-lab-mobile-main-container .main-image-container:fullscreen,
.design-lab-desktop-main-container .design-lab-desktop-image-container .image-container:-webkit-full-screen,
.design-lab-mobile-main-container .main-image-container:-webkit-full-screen {
    background: #ffffff;
    /* Stated rather than left to the UA sheet: the desktop .image-container is
     position: absolute / inset: 0 so it can fill its panel, and an author
     declaration outranks the UA's :fullscreen positioning. Without these the
     element would keep looking for its old containing block. */
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    padding: 24px 0 64px;
    box-sizing: border-box;
}

.image-container:fullscreen #ringCanvas,
.main-image-container:fullscreen #ringCanvas,
.image-container:-webkit-full-screen #ringCanvas,
.main-image-container:-webkit-full-screen #ringCanvas {
    min-height: 100%;
    height: 100%;
    background: transparent;
}

.image-container:fullscreen .luvansh-viewer-overlay-left,
.main-image-container:fullscreen .luvansh-viewer-overlay-left,
.image-container:-webkit-full-screen .luvansh-viewer-overlay-left,
.main-image-container:-webkit-full-screen .luvansh-viewer-overlay-left {
    left: 16px;
    bottom: 16px;
}

.image-container:fullscreen .luvansh-viewer-overlay-right,
.main-image-container:fullscreen .luvansh-viewer-overlay-right,
.image-container:-webkit-full-screen .luvansh-viewer-overlay-right,
.main-image-container:-webkit-full-screen .luvansh-viewer-overlay-right {
    right: 16px;
    bottom: 16px;
}

/* Mobile */
.design-lab-mobile-main-container .main-image-container {
    position: relative;
    /*  flex: 1 1 auto;
  min-height: min(46dvh, 460px);*/
    flex-direction: column;
    /*padding: 16px 0 52px;*/
    box-sizing: border-box;
    background: transparent;
}

.design-lab-mobile-main-container .design-lab-mobile-ring-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.design-lab-mobile-main-container #ringCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 240px;
    border-radius: 2px;
    overflow: hidden;
    background: transparent;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

    .design-lab-mobile-main-container #ringCanvas.viewer-canvas-ready,
    .design-lab-mobile-main-container #ringCanvas.viewer-updating {
        opacity: 1;
        visibility: visible;
    }

.design-lab-mobile-main-container.luvansh-viewer-active .design-lab-mobile-ring-fallback {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.design-lab-mobile-main-container .luvansh-viewer-overlay-right {
    left: 8px;
    right: 8px;
    max-width: none;
    justify-content: flex-end;
}

.design-lab-mobile-main-container .luvansh-viewer-zoom input[type='range'] {
    width: 72px;
}

.luvansh-client-catalog .diamond-head-style-tab-container,
.luvansh-client-catalog .drawer-diamond-head-style-items-container {
    display: none !important;
}

.luvansh-client-catalog .client-head-items-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.luvansh-client-catalog .client-catalog-note {
    margin: 8px 0 0;
    font: 11px/1.4 Manrope, sans-serif;
    color: #5a6b70;
}

/* ── Desktop viewer: full-bleed render, controls floated over it ────────
   The panel used to be a 66px header band stacked above the render slot
   (.image-container was sized height: calc(100% - 66px) to leave room for
   it), so the ring only ever had the lower part of the box and the top strip
   was permanently spent on two rows of buttons.

   Now the render fills the panel's whole border box and the header is lifted
   out of flow on top of it. Both blocks are written to the same depth as the
   rules they replace in design_lab.style.css, and this file loads after it,
   so equal specificity resolves here. */
.design-lab-desktop-main-container .design-lab-desktop-image-container .image-container {
    position: absolute;
    /* Absolute children anchor to the panel's PADDING box, which already sits
     inside its 16px of padding — so inset: 0 is edge to edge, and the ring
     runs right up to the border the way the reference does. */
    inset: 0;
    width: auto;
    height: auto;
    z-index: 1;
}

.design-lab-desktop-main-container .design-lab-desktop-image-container .design-lab-desktop-image-header {
    position: absolute;
    /* Inset by the panel's own padding, so the buttons keep the margin they had
     while the render behind them goes full bleed. */
    top: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    padding-bottom: 0;
    z-index: 3;
    /* The bar spans the full width but only its two clusters should swallow
     clicks — everything between them stays draggable for orbiting the ring. */
    pointer-events: none;
}

    .design-lab-desktop-main-container .design-lab-desktop-image-container .design-lab-desktop-image-header > * {
        pointer-events: auto;
    }

    /* Sitting on the render now, so both clusters need their own ground to stay
   readable when a bright band of metal passes underneath — frosted rather than
   solid, so the ring still reads through them.

   backdrop-filter does the blurring, and it samples the composited result
   underneath, so it blurs the WebGL canvas even though that canvas lives in a
   shadow root the page's own CSS cannot reach. Where the property is
   unsupported the rule degrades to plain translucent white: thinner-looking,
   still legible, because the alpha is high enough to carry the text on its
   own. */
    .design-lab-desktop-main-container .design-lab-desktop-image-container .design-lab-desktop-image-header .reset-container,
    .design-lab-desktop-main-container .design-lab-desktop-image-container .design-lab-desktop-image-header .facility-container {
        background: rgba(255, 255, 255, 0.55);
        -webkit-backdrop-filter: blur(12px) saturate(1.1);
        backdrop-filter: blur(12px) saturate(1.1);
        border: 1px solid rgba(255, 255, 255, 0.65);
        box-shadow: 0 1px 6px rgba(0, 33, 41, 0.08);
    }

    .design-lab-desktop-main-container .design-lab-desktop-image-container .design-lab-desktop-image-header .reset-container {
        padding: 8px 16px;
        border-radius: 8px;
    }

    .design-lab-desktop-main-container .design-lab-desktop-image-container .design-lab-desktop-image-header .facility-container {
        padding: 7px 14px;
        border-radius: 10px;
    }

@media screen and (max-width: 600px) {
    .luvansh-viewer-icon-btn, .luvansh-viewer-quality {
        font-size: 11px;
    }
}