/* Product 3D and AR (inc/product-3d.php, js/pse-product-3d.js). Loaded only on product pages
   with a model. The 3D layer sits exactly over its photo (position and size set by the script),
   with the photo's backdrop colour, so opening and closing it moves nothing on the page.

   Colours come from the site's palette (release/COLOUR-PALETTE.md): the Elementor kit's global
   colours, with the kit's values as fallbacks, and the theme's own greys. */
.pse-3d,
.pse-3d-section {
    --pse-3d-ink: var(--e-global-color-primary, #2b2e34);
    --pse-3d-ink-rgb: 43, 46, 52;
    --pse-3d-hover: var(--e-global-color-8a1e7e6, #82a0b9);
    --pse-3d-paper: var(--e-global-color-74a2e99, #fff);
    --pse-3d-paper-rgb: 255, 255, 255;
    --pse-3d-line: #ddd;
    --pse-3d-line-strong: #707070;
    --pse-3d-wash: #f6f6f7;
    --pse-3d-muted: #707070;
}

.pse-3d-host {
    position: relative;
}

.pse-3d {
    position: absolute;
    top: var(--pse-3d-top, 0);
    left: var(--pse-3d-left, 0);
    z-index: 2;
    width: var(--pse-3d-width, 100%);
    height: var(--pse-3d-height, 100%);
    overflow: hidden;
    border-radius: var(--pse-3d-radius, 0);
    color: var(--pse-3d-ink);
    font-family: inherit;
    line-height: 1.2;
    pointer-events: none;
}

.pse-3d__view {
    position: absolute;
    inset: 0;
    background: var(--pse-3d-backdrop, var(--pse-3d-paper));
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.pse-3d[data-view="model"] .pse-3d__view {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease;
}

.pse-3d model-viewer {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    --poster-color: transparent;
    --progress-bar-height: 0;
}

.pse-3d button {
    margin: 0;
    font: inherit;
    font-size: 14px;
    color: var(--pse-3d-ink);
    letter-spacing: normal;
    text-transform: none;
    pointer-events: auto;
    cursor: pointer;
}

.pse-3d button:focus-visible {
    outline: 2px solid var(--pse-3d-ink) !important; /* the theme removes outlines with !important */
    outline-offset: 2px;
}

.pse-3d .pse-3d__start,
.pse-3d .pse-3d__ar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 18px 6px 7px;
    border: 1px solid var(--pse-3d-line);
    border-radius: 999px;
    background: var(--pse-3d-paper);
    box-shadow: 0 2px 12px rgba(var(--pse-3d-ink-rgb), .08);
    white-space: nowrap;
    transform: translateX(-50%);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pse-3d .pse-3d__start:hover,
.pse-3d .pse-3d__ar:hover {
    border-color: var(--pse-3d-line-strong);
    background: var(--pse-3d-paper);
    box-shadow: 0 4px 18px rgba(var(--pse-3d-ink-rgb), .16);
}

.pse-3d:not(.pse-3d--section):not([data-state="loading"]) .pse-3d__start:hover .pse-3d__icon {
    background: var(--pse-3d-ink);
    color: var(--pse-3d-paper);
}

.pse-3d .pse-3d__ar {
    padding-left: 14px;
}

.pse-3d .pse-3d__ar svg {
    width: 20px;
    height: 20px;
}

.pse-3d[data-view="model"] .pse-3d__start {
    display: none;
}

.pse-3d__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pse-3d-wash);
}

.pse-3d__icon svg {
    width: 20px;
    height: 20px;
}

.pse-3d[data-state="loading"] .pse-3d__icon {
    border: 2px solid var(--pse-3d-line);
    border-top-color: var(--pse-3d-ink);
    background: transparent;
    animation: pse-3d-spin .9s linear infinite;
}

.pse-3d[data-state="loading"] .pse-3d__icon svg {
    visibility: hidden;
}

.pse-3d__tools {
    position: absolute;
    top: 12px;
    right: 12px;
    display: none;
    gap: 6px;
}

.pse-3d[data-view="model"] .pse-3d__tools {
    display: flex;
}

.pse-3d .pse-3d__tool {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--pse-3d-line);
    border-radius: 18px;
    background: var(--pse-3d-paper);
    font-size: 13px;
}

.pse-3d .pse-3d__tool:hover {
    border-color: var(--pse-3d-line-strong);
    background: var(--pse-3d-paper);
}

.pse-3d__tool svg {
    width: 18px;
    height: 18px;
}

.pse-3d__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pse-3d:fullscreen {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

@keyframes pse-3d-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pse-3d__view,
    .pse-3d[data-view="model"] .pse-3d__view {
        transition: none;
    }

    .pse-3d[data-state="loading"] .pse-3d__icon {
        animation: none;
        border-top-color: var(--pse-3d-line);
    }
}

/* The start button's second line, shown only in the section. */
.pse-3d__hint {
    display: none;
}

/* In the "See it in 3D" section the photo is a preview of the model: a light tint over it and
   a large, dark "View in 3D" button in its centre make that clear, and the whole photo opens
   the model (js/pse-product-3d.js). The photo in the product gallery keeps its small button. */
.pse-3d--section[data-view="photo"] {
    pointer-events: auto;
    cursor: pointer;
}

.pse-3d--section[data-view="photo"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--pse-3d-ink-rgb), 0) 45%, rgba(var(--pse-3d-ink-rgb), .14) 100%), rgba(var(--pse-3d-ink-rgb), .04);
    transition: background-color .2s ease;
}

.pse-3d--section[data-view="photo"]:hover::before {
    background-color: rgba(var(--pse-3d-ink-rgb), .09);
}

.pse-3d--section .pse-3d__start {
    top: 50%;
    bottom: auto;
    z-index: 1;
    gap: 14px;
    /* Its own width (a centred absolute box would otherwise get only half the photo's width). */
    width: max-content;
    max-width: calc(100% - 32px);
    min-height: 64px;
    padding: 10px 28px 10px 10px;
    border: 0;
    background: var(--pse-3d-ink);
    color: var(--pse-3d-paper);
    text-align: left;
    box-shadow: 0 10px 30px rgba(var(--pse-3d-ink-rgb), .24);
    transform: translate(-50%, -50%);
}

/* Hover only where a pointer can hover: on touch screens a tap would leave it stuck on. */
@media (hover: hover) {
    .pse-3d--section .pse-3d__start:hover,
    .pse-3d--section[data-view="photo"]:hover .pse-3d__start {
        background: var(--pse-3d-hover);
        color: var(--pse-3d-ink);
    }

    .pse-3d--section .pse-3d__start:hover .pse-3d__label,
    .pse-3d--section .pse-3d__start:hover .pse-3d__hint,
    .pse-3d--section[data-view="photo"]:hover .pse-3d__label,
    .pse-3d--section[data-view="photo"]:hover .pse-3d__hint {
        color: var(--pse-3d-ink);
    }
}

/* The focus ring with a white halo in the gap, so it shows on dark photos too. */
.pse-3d--section .pse-3d__start:focus-visible {
    box-shadow: 0 0 0 2px var(--pse-3d-paper), 0 10px 30px rgba(var(--pse-3d-ink-rgb), .24);
}

.pse-3d--section .pse-3d__icon {
    flex: none;
    width: 44px;
    height: 44px;
    background: rgba(var(--pse-3d-paper-rgb), .14);
}

.pse-3d--section .pse-3d__icon svg {
    width: 24px;
    height: 24px;
}

.pse-3d--section .pse-3d__label {
    display: block;
    font-size: 17px;
    /* The site's bold face (style.css maps 500 and 600 to its condensed and extended black). */
    font-weight: 700;
    color: var(--pse-3d-paper);
}

.pse-3d--section .pse-3d__hint {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: rgba(var(--pse-3d-paper-rgb), .8);
    white-space: normal;
}

.pse-3d--section[data-state="loading"] .pse-3d__hint,
.pse-3d--section[data-state="error"] .pse-3d__hint {
    display: none;
}

/* The model sits on the same white as the photo; a hairline keeps the section's box visible
   once the photo's tint is gone. */
.pse-3d--section .pse-3d__view {
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--pse-3d-line);
}

.pse-3d--section[data-state="loading"] .pse-3d__icon {
    border-color: rgba(var(--pse-3d-paper-rgb), .3);
    border-top-color: var(--pse-3d-paper);
}

/* "See it in 3D" section ([pse_product_3d], placed below the product). */
.pse-3d-section {
    max-width: 880px;
    margin: 40px auto;
    padding: 0 15px;
    text-align: center;
}

.pse-3d-section__title {
    margin: 0 0 24px;
    color: var(--pse-3d-ink);
}

/* The box fits the window below the sticky header (--pse-3d-fixed-top, set by the script), so
   the 3D tools at its top and the AR button at its bottom are both on screen; the photo keeps its
   proportions and the box is centred. */
.pse-3d-section__photo {
    border-radius: 15px;
    background: var(--pse-3d-paper);
    scroll-margin-top: calc(var(--pse-3d-fixed-top, 0px) + 12px);
}

.pse-3d-section__photo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(850px, calc(100vh - var(--pse-3d-fixed-top, 0px) - 24px));
    max-height: min(850px, calc(100svh - var(--pse-3d-fixed-top, 0px) - 24px));
    margin: 0 auto;
    border-radius: 15px;
}

.pse-3d-section__caption {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--pse-3d-muted);
}