/**
 * Infinityskybound 3D Showcase — stage styles.
 * Real depth: perspective + translateZ + rotateY + scale + shadow + fade.
 * All tunables arrive as CSS custom properties printed by the plugin.
 */

.isb3d-stage {
    --isb3d-ease: var(--isb3d-ease, cubic-bezier(.22, .61, .2, 1));
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 34px 0 10px;
    background:
        radial-gradient(120% 90% at 50% 0%, #ffffff 0%, transparent 55%),
        var(--isb3d-bg, #f4f7fb);
    border-radius: 24px;
    overflow: hidden;
    outline: none;
    font-family: inherit;
}
.isb3d-stage * { box-sizing: border-box; }

.isb3d-stage:focus-visible { box-shadow: 0 0 0 3px rgba(0, 147, 221, .55); }

/* ---------- scene ---------- */
.isb3d-viewport {
    position: relative;
    height: calc(var(--isb3d-cardw) * 1.02 + 260px);
    perspective: var(--isb3d-persp);
    perspective-origin: 50% 38%;
}
.is-layout-side .isb3d-viewport { height: calc(var(--isb3d-cardw) * 1.02 + 120px); }
.isb3d-scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}
.isb3d-track {
    position: absolute;
    left: 50%;
    top: 24px;
    width: 0;
    height: calc(var(--isb3d-cardw) * 1.02 + 40px);
    transform-style: preserve-3d;
}

/* ---------- card ---------- */
.isb3d-card {
    position: absolute;
    left: calc(var(--isb3d-cardw) / -2);
    top: 0;
    width: calc(var(--isb3d-cardw) * var(--isb3d-scale) / 100);
    margin: 0;
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    opacity: 1;
    transition:
        transform var(--isb3d-dur) var(--isb3d-ease),
        opacity calc(var(--isb3d-dur) * .92) var(--isb3d-ease);
    will-change: transform, opacity;
    cursor: grab;
    z-index: 5;
}
.isb3d-stage.is-dragging .isb3d-card { cursor: grabbing; transition: none; }

/* depth slots — every slot steps back on Z, side, up, and rotates */
.isb3d-card.is-s1 {
    transform: translate3d(var(--isb3d-x), calc(var(--isb3d-lift) * -1), calc(var(--isb3d-z) * -1))
               rotateY(var(--isb3d-rot)) scale(.96);
    opacity: calc(var(--isb3d-op) / 100);
    z-index: 4;
}
.isb3d-card.is-s2 {
    transform: translate3d(calc(var(--isb3d-x) * 1.9), calc(var(--isb3d-lift) * -1.9), calc(var(--isb3d-z) * -2))
               rotateY(calc(var(--isb3d-rot) * 1.7)) scale(.92);
    opacity: calc(var(--isb3d-op) / 100 * .62);
    z-index: 3;
}
.isb3d-card.is-s3 {
    transform: translate3d(calc(var(--isb3d-x) * 2.7), calc(var(--isb3d-lift) * -2.7), calc(var(--isb3d-z) * -3))
               rotateY(calc(var(--isb3d-rot) * 2.2)) scale(.88);
    opacity: calc(var(--isb3d-op) / 100 * .38);
    z-index: 2;
}
.isb3d-card.is-s4 {
    transform: translate3d(calc(var(--isb3d-x) * 3.4), calc(var(--isb3d-lift) * -3.4), calc(var(--isb3d-z) * -4))
               rotateY(calc(var(--isb3d-rot) * 2.6)) scale(.85);
    opacity: 0;
    z-index: 1;
}
/* invisible queue far behind */
.isb3d-card.is-deep {
    transform: translate3d(calc(var(--isb3d-x) * 4.1), calc(var(--isb3d-lift) * -4), calc(var(--isb3d-z) * -4.8))
               rotateY(calc(var(--isb3d-rot) * 2.8)) scale(.84);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
/* exiting / entering flights */
.isb3d-card.is-outL {
    transform: translate3d(calc(var(--isb3d-x) * -1.7), 6px, calc(var(--isb3d-z) * -2.1))
               rotateY(calc(var(--isb3d-rot) * -.85)) scale(.86);
    opacity: 0;
    z-index: 4;
}
.isb3d-card.is-outR {
    transform: translate3d(calc(var(--isb3d-x) * 3.55), calc(var(--isb3d-lift) * -3.6), calc(var(--isb3d-z) * -4.1))
               rotateY(calc(var(--isb3d-rot) * 2.5)) scale(.84);
    opacity: .1;
    z-index: 1;
}
.isb3d-card.is-inL {
    transform: translate3d(calc(var(--isb3d-x) * -1.6), 8px, calc(var(--isb3d-z) * -2.4))
               rotateY(calc(var(--isb3d-rot) * -.9)) scale(.82);
    opacity: 0;
    z-index: 6;
}

/* ---------- media ---------- */
.isb3d-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--isb3d-radius);
    background: linear-gradient(180deg, #ffffff 0%, #f2f5f9 100%);
    box-shadow:
        0 1px 2px rgba(15, 32, 57, .08),
        0 12px 24px -12px rgba(15, 32, 57, calc(var(--isb3d-shadow) * .30 / 100)),
        0 30px 60px -24px rgba(15, 32, 57, calc(var(--isb3d-shadow) * .45 / 100));
    overflow: hidden;
    transition: box-shadow var(--isb3d-dur) var(--isb3d-ease);
}
.isb3d-media img,
.isb3d-media .wp-post-image {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    border: 0;
    background: transparent;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform var(--isb3d-dur) var(--isb3d-ease), filter var(--isb3d-dur) var(--isb3d-ease);
}
/* contained = product floats (transparency preserved); cover = photographic */
.isb3d-contain img { object-fit: contain; padding: 7%; }
.isb3d-cover img { object-fit: cover; }

/* depth-of-field: blur grows with distance */
.isb3d-card.is-s1 .isb3d-media img { filter: blur(var(--isb3d-blur)) saturate(.92); }
.isb3d-card.is-s2 .isb3d-media img { filter: blur(calc(var(--isb3d-blur) * 2)) saturate(.85); }
.isb3d-card.is-s3 .isb3d-media img { filter: blur(calc(var(--isb3d-blur) * 3)) saturate(.8); }
.isb3d-card.is-s4 .isb3d-media img,
.isb3d-card.is-deep .isb3d-media img,
.isb3d-card.is-outL .isb3d-media img,
.isb3d-card.is-inL .isb3d-media img { filter: blur(calc(var(--isb3d-blur) * 2)); }

/* perspective lighting sheen */
.isb3d-sheen {
    position: absolute;
    inset: 0;
    border-radius: var(--isb3d-radius);
    background: linear-gradient(122deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 34%, rgba(9, 27, 51, .05) 100%);
    pointer-events: none;
    opacity: var(--isb3d-lighting, 1);
}
.is-s1 .isb3d-sheen { background: linear-gradient(122deg, rgba(255,255,255,.22) 0%, rgba(9,27,51,.10) 78%); }

/* ground shadow — a real floor plane inside the 3D space */
.isb3d-floor {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -7%;
    height: 12%;
    transform: rotateX(90deg);
    background: radial-gradient(ellipse at center, rgba(9, 27, 51, calc(var(--isb3d-shadow) * .38 / 100)) 0%, rgba(9, 27, 51, 0) 68%);
    filter: blur(9px);
    pointer-events: none;
}
/* subtle floor reflection (WebKit — graceful no-op elsewhere) */
.isb3d-reflect .isb3d-media {
    -webkit-box-reflect: below 10px linear-gradient(transparent 62%, rgba(255, 255, 255, .16) 100%);
}

/* ---------- info panel ---------- */
.isb3d-info {
    margin: 16px 6px 0;
    text-align: center;
    transition: opacity calc(var(--isb3d-dur) * .8) var(--isb3d-ease);
}
.is-s1 .isb3d-info, .is-s2 .isb3d-info, .is-s3 .isb3d-info, .is-s4 .isb3d-info,
.is-deep .isb3d-info, .is-outL .isb3d-info, .is-outR .isb3d-info, .is-inL .isb3d-info { opacity: 0; }

.isb3d-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--isb3d-accent, #0093dd);
    margin-bottom: 4px;
}
.isb3d-name {
    margin: 0 0 6px;
    font-size: calc(var(--isb3d-cardw) * .062);
    line-height: 1.25;
    font-weight: 700;
    color: #16233a;
}
.isb3d-name a { color: inherit; text-decoration: none; }
.isb3d-name a:hover { color: var(--isb3d-accent, #0093dd); }

.isb3d-stars { font-size: 13.5px; color: #f5a623; letter-spacing: .05em; }
.isb3d-stars span { color: #f5a623; }

.isb3d-desc {
    margin: 8px auto 0;
    max-width: 92%;
    font-size: 13.5px;
    line-height: 1.55;
    color: #5a6b81;
}

.isb3d-price { margin-top: 10px; font-size: 18px; font-weight: 800; color: #16233a; }
.isb3d-price del { opacity: .45; font-weight: 600; font-size: 14.5px; margin-right: 6px; }
.isb3d-price ins { text-decoration: none; }
.isb3d-badge {
    display: inline-block;
    background: #d63638;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 2px 8px;
    vertical-align: 2px;
}

.isb3d-actions { margin-top: 13px; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.isb3d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 19px;
    border-radius: calc(var(--isb3d-radius) * .7);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.isb3d-btn:active { transform: translateY(1px); }
.isb3d-view {
    background: var(--isb3d-accent, #0093dd);
    color: #fff !important;
    box-shadow: 0 8px 18px -8px rgba(0, 90, 150, .55);
}
.isb3d-view:hover { filter: brightness(1.08); color: #fff; }
.isb3d-cart {
    background: #fff;
    color: #16233a !important;
    box-shadow: inset 0 0 0 1.5px rgba(22, 35, 58, .22);
}
.isb3d-cart:hover { box-shadow: inset 0 0 0 1.5px var(--isb3d-accent, #0093dd); color: var(--isb3d-accent, #0093dd) !important; }

/* ---------- nav arrows ---------- */
.isb3d-nav {
    position: absolute;
    top: 38%;
    z-index: 40;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 26px -10px rgba(9, 27, 51, .45), inset 0 0 0 1px rgba(9, 27, 51, .06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
.isb3d-nav:hover { transform: scale(1.07); }
.isb3d-nav svg { width: 22px; height: 22px; fill: #16233a; }
.isb3d-prev { left: 14px; }
.isb3d-next { right: 14px; }

/* ---------- dots ---------- */
.isb3d-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 12px;
}
.isb3d-dot {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    background: rgba(22, 35, 58, .22);
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform .2s ease, background-color .2s ease;
}
.isb3d-dot::after { content: ""; position: absolute; inset: -8px; } /* comfy hit target */
.isb3d-dot:hover { transform: scale(1.25); }
.isb3d-dot.is-active { background: var(--isb3d-accent, #0093dd); transform: scale(1.35); }

/* ---------- mobile preset (admin can switch it off) ---------- */
@media (max-width: 767px) {
    /* v1.2: calmer than desktop but the background stack stays clearly visible */
    .isb3d-stage.isb3d-reduce {
        --isb3d-persp: calc(var(--isb3d-persp-d) * .7);
        --isb3d-z: calc(var(--isb3d-z-d) * .7);
        --isb3d-rot: calc(var(--isb3d-rot-d) * .72);
        --isb3d-x: calc(var(--isb3d-x-d) * .95);
        --isb3d-lift: calc(var(--isb3d-lift-d) * .8);
        --isb3d-blur: calc(var(--isb3d-blur-d) * .8);
    }
    .isb3d-stage.isb3d-reduce .isb3d-card.is-s1 { opacity: calc(max(var(--isb3d-op), 62) / 100); }
    .isb3d-stage.isb3d-reduce .isb3d-card.is-s2 { opacity: calc(max(var(--isb3d-op), 62) / 100 * .65); }
    .isb3d-stage.isb3d-reduce .isb3d-card.is-s3 { opacity: calc(max(var(--isb3d-op), 62) / 100 * .4); }
    /* admin toggle: hide the background stack on phones entirely */
    .isb3d-stage.is-m-nobg .isb3d-card.is-s1,
    .isb3d-stage.is-m-nobg .isb3d-card.is-s2,
    .isb3d-stage.is-m-nobg .isb3d-card.is-s3 {
        opacity: 0;
        transform: translate3d(12%, -8%, calc(var(--isb3d-z) * -2.4)) rotateY(calc(var(--isb3d-rot) * 1.2)) scale(.9);
    }
    .isb3d-stage .isb3d-card {
        width: calc(78vw * var(--isb3d-mobile, 76) / 76);
        left: calc(78vw * var(--isb3d-mobile, 76) / 76 / -2);
    }
    .isb3d-stage .isb3d-viewport { height: calc(78vw * var(--isb3d-mobile, 76) / 76 * 1.02 + 235px); }
    .isb3d-stage .isb3d-track { top: 10px; }
    .isb3d-nav { width: 40px; height: 40px; top: 32%; }
    .isb3d-name { font-size: calc(78vw * var(--isb3d-mobile, 76) / 76 * .062); }
}

/* reduced motion: instant, still 3D */
@media (prefers-reduced-motion: reduce) {
    .isb3d-card, .isb3d-media img, .isb3d-info { transition-duration: 1ms !important; }
}

/* ================= v1.1 — grid + fancy 3D text panel ================= */
.isb3d-grid {
    display: grid;
    grid-template-columns: minmax(250px, 400px) 1fr;
    gap: 12px;
    align-items: center;
    padding: 6px 22px 0 34px;
}
.isb3d-canvas { position: relative; min-width: 0; }

.isb3d-panel {
    position: relative;
    z-index: 30;
    padding: 18px 6px 18px 10px;
    min-height: 230px;
    perspective: 800px;
}
.isb3d-pkicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--isb3d-accent, #0093dd);
    margin-bottom: 10px;
}
.isb3d-ptitle {
    margin: 0 0 12px;
    font-size: var(--isb3d-tsize, 34px);
    line-height: 1.12;
    font-weight: 800;
    color: #16233a;
    transform-style: preserve-3d;
}
.isb3d-ptitle b {
    display: inline-block;
    transform-origin: left bottom;
}
/* the fancy 3D title: real rotateY + an extruded shadow stack + soft drop */
.is-layout-side.is-t3d .isb3d-ptitle b {
    transform: rotateY(-7deg);
    text-shadow:
        1px 1px 0 #d5dfe9, 2px 2px 0 #ccD8e5, 3px 3px 0 #c4d1e0,
        4px 4px 0 #bccadf, 5px 5px 0 #b5c4de, 6px 6px 0 #aebedd,
        7px 7px 18px rgba(15, 32, 57, .35);
}
.is-layout-side:not(.is-t3d) .isb3d-ptitle b { transform: none; }

.isb3d-pdesc {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #5a6b81;
    max-width: 40ch;
}
.isb3d-pprice { margin: -4px 0 12px; font-size: 19px; font-weight: 800; color: #16233a; }
.isb3d-pprice:empty { display: none; }
.isb3d-pprice del { opacity: .45; font-size: 15px; margin-right: 6px; }
.isb3d-pprice ins { text-decoration: none; }
.isb3d-pbtn { display: none; }

/* slide swap animation — the text arrives out of the Z-axis */
.isb3d-panel.is-swap .isb3d-ptitle b {
    animation: isb3d-tin calc(var(--isb3d-dur) * .9) var(--isb3d-ease, var(--isb3d-ease, cubic-bezier(.22, .61, .2, 1)));
}
.isb3d-panel.is-swap .isb3d-pkicker,
.isb3d-panel.is-swap .isb3d-pdesc,
.isb3d-panel.is-swap .isb3d-pprice,
.isb3d-panel.is-swap .isb3d-pbtn {
    animation: isb3d-fadein calc(var(--isb3d-dur) * .8) var(--isb3d-ease, var(--isb3d-ease, cubic-bezier(.22, .61, .2, 1)));
}
@keyframes isb3d-tin {
    0%   { opacity: 0; transform: rotateY(35deg) translateZ(-110px); }
    100% { opacity: 1; transform: rotateY(-7deg) translateZ(0); }
}
@keyframes isb3d-fadein {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .isb3d-grid {
        grid-template-columns: 1fr;
        padding: 6px 12px 0;
        gap: 2px;
    }
    .isb3d-panel {
        text-align: center;
        min-height: 0;
        padding: 12px 8px 4px;
    }
    .isb3d-pdesc { margin-left: auto; margin-right: auto; }
    .is-layout-side.is-t3d .isb3d-ptitle b { transform: none; text-shadow: 0 10px 22px rgba(15, 32, 57, .22); }
    .isb3d-panel.is-swap .isb3d-ptitle b { animation-name: isb3d-tin-flat; }
    @keyframes isb3d-tin-flat {
        0% { opacity: 0; transform: translateY(16px); }
        100% { opacity: 1; transform: none; }
    }
    .is-layout-side .isb3d-viewport { height: calc(78vw * var(--isb3d-mobile, 76) / 76 * 1.02 + 110px); }
}

/* ================= v1.2 — transition styles & transparent cards ================= */
/* Card background: transparent mode (products / badges float freely) */
.is-bg-none .isb3d-media { background: transparent; box-shadow: none; }
.is-bg-none .isb3d-contain img { padding: 2%; }
.is-bg-none .isb3d-sheen { opacity: 0; }

/* FLIP — panels swinging around the Y axis */
.is-style-flip .isb3d-card.is-s1 { transform: translate3d(9%, 0, calc(var(--isb3d-z) * -0.7)) rotateY(-58deg) scale(.94); }
.is-style-flip .isb3d-card.is-s2 { transform: translate3d(15%, 0, calc(var(--isb3d-z) * -1.5)) rotateY(-64deg) scale(.9); }
.is-style-flip .isb3d-card.is-s3 { transform: translate3d(20%, 0, calc(var(--isb3d-z) * -2.2)) rotateY(-68deg) scale(.86); }
.is-style-flip .isb3d-card.is-s4 { transform: translate3d(24%, 0, calc(var(--isb3d-z) * -2.8)) rotateY(-70deg) scale(.83); }
.is-style-flip .isb3d-card.is-deep { transform: translate3d(26%, 0, calc(var(--isb3d-z) * -3.2)) rotateY(-72deg) scale(.82); }
.is-style-flip .isb3d-card.is-outL { transform: translate3d(-14%, 0, calc(var(--isb3d-z) * -1.4)) rotateY(62deg) scale(.9); opacity: 0; }
.is-style-flip .isb3d-card.is-outR { transform: translate3d(24%, 0, calc(var(--isb3d-z) * -2.6)) rotateY(-66deg) scale(.86); opacity: .1; }
.is-style-flip .isb3d-card.is-inL { transform: translate3d(-15%, 0, calc(var(--isb3d-z) * -1.6)) rotateY(64deg) scale(.88); opacity: 0; }

/* RISE — slides arrive from below the stage floor */
.is-style-rise .isb3d-card.is-s1 { transform: translate3d(4%, -9%, calc(var(--isb3d-z) * -0.85)) rotateX(16deg) scale(.93); }
.is-style-rise .isb3d-card.is-s2 { transform: translate3d(8%, -17%, calc(var(--isb3d-z) * -1.7)) rotateX(22deg) scale(.88); }
.is-style-rise .isb3d-card.is-s3 { transform: translate3d(11%, -24%, calc(var(--isb3d-z) * -2.5)) rotateX(26deg) scale(.84); }
.is-style-rise .isb3d-card.is-s4 { transform: translate3d(13%, -30%, calc(var(--isb3d-z) * -3.2)) rotateX(28deg) scale(.82); }
.is-style-rise .isb3d-card.is-deep { transform: translate3d(14%, -34%, calc(var(--isb3d-z) * -3.6)) rotateX(30deg) scale(.81); }
.is-style-rise .isb3d-card.is-outL { transform: translate3d(-12%, 14%, calc(var(--isb3d-z) * -1.2)) rotateX(-14deg) scale(.88); opacity: 0; }
.is-style-rise .isb3d-card.is-outR { transform: translate3d(13%, -28%, calc(var(--isb3d-z) * -3)) rotateX(26deg) scale(.84); opacity: .1; }
.is-style-rise .isb3d-card.is-inL { transform: translate3d(-10%, 18%, calc(var(--isb3d-z) * -1.4)) rotateX(-16deg) scale(.86); opacity: 0; }

/* ZOOM — a deep corridor straight back */
.is-style-zoom .isb3d-card.is-s1 { transform: translate3d(3%, -3%, calc(var(--isb3d-z) * -1)) rotateY(-8deg) scale(.9); }
.is-style-zoom .isb3d-card.is-s2 { transform: translate3d(5%, -5%, calc(var(--isb3d-z) * -2.1)) rotateY(-10deg) scale(.82); }
.is-style-zoom .isb3d-card.is-s3 { transform: translate3d(6%, -6%, calc(var(--isb3d-z) * -3.1)) rotateY(-11deg) scale(.76); }
.is-style-zoom .isb3d-card.is-s4 { transform: translate3d(7%, -7%, calc(var(--isb3d-z) * -4)) rotateY(-12deg) scale(.71); }
.is-style-zoom .isb3d-card.is-deep { transform: translate3d(8%, -8%, calc(var(--isb3d-z) * -4.6)) rotateY(-12deg) scale(.68); }
.is-style-zoom .isb3d-card.is-outL { transform: translate3d(-10%, 4%, calc(var(--isb3d-z) * -1.8)) rotateY(10deg) scale(.8); opacity: 0; }
.is-style-zoom .isb3d-card.is-outR { transform: translate3d(7%, -7%, calc(var(--isb3d-z) * -3.8)) rotateY(-11deg) scale(.74); opacity: .1; }
.is-style-zoom .isb3d-card.is-inL { transform: translate3d(-9%, 4%, calc(var(--isb3d-z) * -2)) rotateY(11deg) scale(.78); opacity: 0; }