/* =========================================================
   PDA SINGLE PRODUCT
========================================================= */

.pda-single-product-wrapper {

    --pda-bg: #111d2a;
    --pda-dark: #080f17;
    --pda-gold: #c6a15b;
    --pda-gold-light: #e1c27d;
    --pda-white: #0B141D;
    --pda-muted: #9ba6b2;

    position: relative;

    min-height: 100vh;

    width: 100%;

    box-sizing: border-box;

    padding: 55px 5% 90px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(198,161,91,.07),
            transparent 40%
        ),
        var(--pda-bg);

    color: var(--pda-white);

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   PDA — SCROLL SCRAMBLE BACKGROUND
========================================================= */

.pda-scramble-bg {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
    overflow: hidden;

    opacity: 0.045;

    color: var(--pda-gold, #AF7F5A);

    font-family: 'Noto Sans Mono', monospace;
}

.pda-scramble-bg p {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    width: 90vw;
    max-width: 1500px;

    margin: 0;
    padding: 0;

    font-family: 'Noto Sans Mono', monospace;
    font-size: clamp(60px, 9vw, 150px);
    font-weight: 400;

    line-height: 0.95;
    letter-spacing: 0.04em;

    text-align: center;
}


/* =========================================================
   LETTERS
========================================================= */

.pda-scramble-bg p span:not(.space) {

    display: inline-block;

    position: relative;

    margin: 0;
    padding: 0;

    color: inherit;

    transform:
        translate3d(
            var(--pda-x, 0px),
            var(--pda-y, 0px),
            0
        )
        rotate(var(--pda-r, 0deg));

    will-change: transform;

    transition:
        transform 0.15s linear;
}


/* =========================================================
   SPACE
========================================================= */

.pda-scramble-bg p span.space {
    width: 0.45em;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .pda-scramble-bg {
        opacity: 0.03;
    }

    .pda-scramble-bg p {
        width: 94vw;

        font-size: clamp(40px, 13vw, 90px);

        letter-spacing: 0.02em;
    }
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.pda-product-grid {

    position: relative;

    z-index: 5;

    width: min(1080px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1fr);

    gap: 65px;

    align-items: center;
}


/* =========================================================
   GALLERY
========================================================= */

.pda-gallery-section {

    width: 100%;

    max-width: 440px;

    margin: 0 auto;

    min-width: 0;
}


.pda-gallery-label {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

    padding: 0 2px;

    color: var(--pda-gold);

    font-family: 'Noto Sans Mono', monospace;

    font-size: 8px;

    letter-spacing: 1.4px;
}


/* =========================================================
   MAIN POSTER
========================================================= */

.pda-main-image-frame {

    position: relative;

    width: min(100%, 390px);

    margin: 0 auto;

    padding: 7px;

    box-sizing: border-box;

    background: var(--pda-dark);

    border: 1px solid rgba(198,161,91,.38);

    box-shadow:
        0 20px 50px rgba(0,0,0,.38);

    overflow: hidden;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}


.pda-main-image-frame:hover {

    border-color: rgba(198,161,91,.65);

    box-shadow:
        0 25px 60px rgba(0,0,0,.48);
}


/* MAIN IMAGE */

.pda-main-image {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    max-width: 100% !important;

    max-height: 480px;

    object-fit: contain !important;

    object-position: center;

    margin: 0 !important;

    padding: 0 !important;

    background: #080f17;

    opacity: 1;

    filter: none;

    transition:
        opacity .25s ease,
        filter .25s ease,
        transform .35s ease;
}


/* image switching */

.pda-main-image.pda-image-changing {

    opacity: .15;

    filter: blur(2px);
}


/* =========================================================
   IMAGE CORNERS
========================================================= */

.pda-image-corner {

    position: absolute;

    z-index: 3;

    width: 16px;

    height: 16px;

    pointer-events: none;
}


.pda-image-corner.top-left {

    top: 4px;

    left: 4px;

    border-top: 1px solid var(--pda-gold);

    border-left: 1px solid var(--pda-gold);
}


.pda-image-corner.top-right {

    top: 4px;

    right: 4px;

    border-top: 1px solid var(--pda-gold);

    border-right: 1px solid var(--pda-gold);
}


.pda-image-corner.bottom-left {

    bottom: 4px;

    left: 4px;

    border-bottom: 1px solid var(--pda-gold);

    border-left: 1px solid var(--pda-gold);
}


.pda-image-corner.bottom-right {

    bottom: 4px;

    right: 4px;

    border-bottom: 1px solid var(--pda-gold);

    border-right: 1px solid var(--pda-gold);
}


.pda-image-overlay {

    position: absolute;

    inset: 7px;

    pointer-events: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            transparent 30%
        );
}


/* =========================================================
   THUMBNAILS
========================================================= */

.pda-thumbs-wrapper {

    width: min(100%, 390px);

    margin: 13px auto 0;
}


.pda-thumbs-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 7px;

    padding: 0 2px;

    color: var(--pda-gold);

    font-family: 'Noto Sans Mono', monospace;

    font-size: 8px;

    letter-spacing: 1.2px;
}


.pda-thumbs-list {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    gap: 7px !important;

    width: 100%;

    overflow-x: auto !important;

    overflow-y: hidden;

    padding: 3px 2px 8px;

    box-sizing: border-box;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(198,161,91,.35)
        transparent;
}


.pda-thumb-item {

    position: relative;

    flex: 0 0 54px !important;

    width: 54px !important;

    min-width: 54px !important;

    height: 54px !important;

    padding: 0 !important;

    margin: 0 !important;

    border: 1px solid rgba(198,161,91,.20) !important;

    outline: none !important;

    background: #080f17 !important;

    cursor: pointer !important;

    overflow: hidden;

    opacity: .55;

    appearance: none;

    -webkit-appearance: none;

    transition:
        opacity .2s ease,
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.pda-thumb-item:hover {

    opacity: 1;

    transform: translateY(-2px);

    border-color: var(--pda-gold) !important;
}


.pda-thumb-item.active {

    opacity: 1;

    border-color: var(--pda-gold) !important;

    box-shadow:
        0 0 0 1px rgba(198,161,91,.20);
}


.pda-thumb-img {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    margin: 0 !important;

    padding: 0 !important;

    pointer-events: none !important;

    transition: transform .3s ease;
}


.pda-thumb-item:hover .pda-thumb-img {

    transform: scale(1.06);
}


.pda-thumb-number {

    position: absolute;

    right: 3px;

    bottom: 2px;

    z-index: 2;

    color: #fff;

    font-family: 'Noto Sans Mono', monospace;

    font-size: 7px;

    text-shadow:
        0 1px 5px #000;

    pointer-events: none;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.pda-info-section {

    width: 100%;

    max-width: 500px;
}


.pda-case-status {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 13px;

    color: var(--pda-muted);

    font-family: 'Noto Sans Mono', monospace;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.pda-status-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #91aa78;

    box-shadow:
        0 0 8px rgba(145,170,120,.65);
}


.pda-product-title {

    margin: 0 0 13px !important;

    color: var(--pda-gold) !important;

    font-family: Georgia, serif !important;

    font-size: clamp(32px, 4vw, 48px) !important;

    font-weight: normal !important;

    line-height: 1.05 !important;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.pda-title-line {

    width: 55px;

    height: 1px;

    margin-bottom: 20px;

    background: var(--pda-gold);
}


.pda-product-price {

    margin-bottom: 18px;

    color: #fff;

    font-family: 'Noto Sans Mono', monospace;

    font-size: 19px;
}


.pda-product-description {

    margin-bottom: 25px;

    color: #aeb7c1;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   CART
========================================================= */

.pda-cart-container .cart {

    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


.pda-cart-container input.qty {

    width: 52px !important;

    height: 43px !important;

    padding: 8px !important;

    box-sizing: border-box;

    background: #080f17 !important;

    border: 1px solid rgba(198,161,91,.45) !important;

    color: var(--pda-gold) !important;

    text-align: center;

    border-radius: 0 !important;
}


.pda-cart-container .single_add_to_cart_button {

    height: 43px;

    padding: 0 22px !important;

    background: var(--pda-gold) !important;

    border: 1px solid var(--pda-gold) !important;

    border-radius: 0 !important;

    color: #101820 !important;

    font-family: 'Noto Sans Mono', monospace;

    font-size: 10px;

    font-weight: 600 !important;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.pda-cart-container .single_add_to_cart_button:hover {

    background: transparent !important;

    color: var(--pda-gold) !important;

    transform: translateY(-1px);
}


/* =========================================================
   CLASSIFIED
========================================================= */

.pda-classified {

    display: flex;

    justify-content: space-between;

    margin-top: 30px;

    padding-top: 10px;

    border-top: 1px solid rgba(255,255,255,.06);

    color: rgba(255,255,255,.25);

    font-family: 'Noto Sans Mono', monospace;

    font-size: 7px;

    letter-spacing: 1.2px;
}


/* =========================================================
   LAMP
========================================================= */

.pda-lamp-footer {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 65px;
}


/* button */

.pda-lamp-button {

    position: relative;

    width: 150px;

    height: 135px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    outline: none;

    appearance: none;

    -webkit-appearance: none;

    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

/* Prevent WordPress/theme button styles from creating a blue hover/focus effect */
.pda-lamp-button:hover,
.pda-lamp-button:focus,
.pda-lamp-button:focus-visible,
.pda-lamp-button:active {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

.pda-lamp-button::-moz-focus-inner {
    border: 0 !important;
}



.pda-lamp-button:disabled {

    cursor: default;

    opacity: .5;
}


/* halo */

.pda-lamp-halo {

    position: absolute;

    top: 10px;

    left: 50%;

    width: 100px;

    height: 100px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,220,145,.18),
            rgba(198,161,91,.06) 45%,
            transparent 72%
        );

    filter: blur(5px);

    opacity: .7;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* lamp */

.pda-lamp {

    position: absolute;

    top: 25px;

    left: 50%;

    width: 78px;

    height: 82px;

    transform: translateX(-50%);

    filter:
        drop-shadow(
            0 12px 15px rgba(0,0,0,.45)
        );
}


/* rope */

.pda-lamp-rope {


    position: absolute;

    top: -27px;

    left: 50%;

    width: 2px;

    height: 30px;

    transform: translateX(-50%);

    transform-origin: top;

    background:
        linear-gradient(
            #604821,
            var(--pda-gold),
            #604821
        );

    transition: transform .25s ease;
}


/* cap */

.pda-lamp-cap {

    position: absolute;

    top: 0;

    left: 50%;

    width: 30px;

    height: 10px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            #5a4325,
            var(--pda-gold-light),
            #5a4325
        );
}


/* body */

.pda-lamp-body {

    position: absolute;

    top: 8px;

    left: 50%;

    width: 78px;

    height: 58px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #4e3a22 0%,
            #9a7337 20%,
            #e2bb6d 45%,
            #f0d18e 52%,
            #a77e3d 78%,
            #49351f 100%
        );

    clip-path: polygon(
        15% 0,
        85% 0,
        100% 100%,
        0 100%
    );
}


/* light */

.pda-lamp-glow {

    position: absolute;

    left: 50%;

    bottom: 8px;

    width: 42px;

    height: 27px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            #fff3c6 0%,
            #e5c477 32%,
            rgba(198,161,91,.18) 65%,
            transparent 75%
        );

    filter: blur(1px);

    box-shadow:
        0 0 22px rgba(230,195,120,.45);
}


/* bottom ring */

.pda-lamp-ring {

    position: absolute;

    bottom: 6px;

    left: 50%;

    width: 82px;

    height: 7px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            #604925,
            #d5ae65,
            #604925
        );
}


/* hint */

.pda-lamp-hint {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    color: rgba(198,161,91,.7);

    font-family: 'Noto Sans Mono', monospace;

    font-size: 7px;

    letter-spacing: 1px;

    text-align: center;

    white-space: nowrap;

    transition: color .25s ease;
}


/* hover */

.pda-lamp-button:not(:disabled):hover .pda-lamp-halo {

    opacity: 1;

    transform:
        translateX(-50%)
        scale(1.2);
}


.pda-lamp-button:not(:disabled):hover .pda-lamp-rope {

    transform:
        translateX(-50%)
        rotate(4deg);
}


.pda-lamp-button:not(:disabled):hover .pda-lamp-body {

    filter: brightness(1.12);
}


.pda-lamp-button:not(:disabled):hover .pda-lamp-hint {

    color: var(--pda-gold-light);
}


/* =========================================================
   LAMP / BELL FOOTER CONTAINER & SCOPE
========================================================= */

.pda-lamp-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 1rem;
}


/* =========================================================
   LAMP BUTTON & WRAPPER
========================================================= */

.pda-lamp-button {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
    font-family: inherit;
}

.pda-lamp-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.pda-lamp-wrapper {
    --_size: clamp(200px, 30vw, 320px);
    --base-clr: #b7b5b4;
    --degofrot: 0.8;

    font-size: calc(var(--_size) * 0.01);
    position: relative;
    width: 80em;
    height: 80em;
    display: block;
    width: 80em;
    height: 80em;
    max-width: none;
    max-height: none;
    overflow: visible;
    transform-origin: 50% -20vh;
    animation: bell 5s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.pda-lamp-wrapper *,
.pda-lamp-wrapper *::before,
.pda-lamp-wrapper *::after {
    transition: filter 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
        opacity 0.4s ease-in-out, color 0.4s ease-in-out, background 0.4s ease-in-out,
        text-shadow 0.4s ease-in-out;
}

.pda-lamp-wrapper,
.pda-lamp-wrapper * {
    position: absolute;
    inset: 0;
    margin: auto;
}

/* =========================================================
   BELL INTERNAL GRAPHICS
========================================================= */

.pda-lamp-button .pda-lamp-wrapper,
.pda-lamp-button .pda-lamp-wrapper * {
    box-sizing: border-box;
}

.pda-lamp-button .pda-lamp-wrapper {
    flex: 0 0 auto;
    pointer-events: none;
}

/* =========================================================
   BELL INTERNAL GRAPHICS
========================================================= */

.pda-lamp-wrapper .rope {
    height: 50vh;
    width: 2em;
    translate: 0 -52%;
    background: linear-gradient(90deg, #2d54744d 0%, #000b 30%, transparent 100%),
        repeating-linear-gradient(-70deg, #252525, #888 2%, #3a3a3a 3%);

    /* The mask creates the fade effect */
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
      mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
}

.pda-lamp-wrapper .bell-top {
    width: 14%;
    height: 14%;
    border-radius: 50%;
    translate: 0 -28em;
    background: var(--base-clr);
    box-shadow: inset -1em -0.5em 2em 0.5em #fff, inset 1em -1em 2em 3em #000,
        0 -0.1em 0.4em 0.3em #c6eaffa8;
}

.pda-lamp-wrapper .bell-base {
    width: 20%;
    height: 20%;
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    translate: 0 -24%;
    box-sizing: border-box;
    background: var(--base-clr);
    box-shadow: 0 -0.1em 0.4em 0.2em #c6eaffa8;
}

.pda-lamp-wrapper .bell-base:before {
    content: "";
    background-image: radial-gradient(
        circle at -80% -12%,
        transparent 50em,
        var(--base-clr) 50em
    );
    position: absolute;
    translate: -18em 20em;
    width: 100%;
    height: 80%;
}

.pda-lamp-wrapper .bell-base:after {
    content: "";
    background-image: radial-gradient(
        circle at -80% -12%,
        transparent 50.1em,
        #cacaca 50.3em,
        var(--base-clr) 50.5em
    );
    position: absolute;
    translate: 18em 20em;
    width: 100%;
    height: 80%;
    transform: rotateY(180deg);
}

.pda-lamp-wrapper .bell-base:nth-child(2) {
    filter: brightness(3) blur(1em);
    scale: 0.74 0.84;
    translate: 0em -11em;
}

.pda-lamp-wrapper .shadow-l1 {
    width: 30em;
    height: 42em;
    border-radius: 50%;
    rotate: 12deg;
    translate: -3em -6em;
    filter: blur(2em);
    background: #797a80;
}

.pda-lamp-wrapper .shadow-l2 {
    width: 130%;
    height: 90%;
    filter: blur(5em);
    translate: -6em 9em;
}

.pda-lamp-wrapper .shadow-l2::before {
    display: block;
    content: "";
    width: 68%;
    height: 64%;
    border-radius: 50%;
    rotate: -54deg;
    translate: -8em 2em;
    scale: 1;
    background: #000000;
}

.pda-lamp-wrapper .glow {
    width: 100%;
    height: 100%;
    filter: brightness(2) blur(2em);
}

.pda-lamp-wrapper .glow::before {
    clip-path: polygon(
        9% 83%, 12% 79%, 15% 74%, 18% 68%, 20% 62%, 22% 56%, 23% 50%, 24% 43%,
        25% 38%, 25% 34%, 26% 29%, 26% 26%, 27% 22%, 29% 19%, 30% 15%, 32% 13%,
        34% 10%, 37% 7%, 41% 5%, 44% 4%, 47% 3%, 51% 3%, 55% 3%, 58% 5%, 62% 6%,
        73% 29%, 72% 25%, 70% 20%, 67% 16%, 63% 12%, 60% 9%, 58% 8%, 55% 7%,
        52% 6%, 48% 6%, 44% 8%, 41% 9%, 37% 12%, 36% 14%, 33% 16%, 31% 20%,
        30% 23%, 29% 26%, 28% 31%, 27% 36%, 27% 39%, 26% 44%, 26% 48%, 26% 52%,
        25% 56%, 23% 61%, 22% 65%, 21% 69%, 19% 72%, 17% 75%, 15% 78%, 13% 81%
    );
    width: 100%;
    height: 80%;
    translate: 0 6em;
    scale: 0.94 0.94;
    background: #fff3;
    display: block;
    content: "";
}

.pda-lamp-wrapper .glow2 {
    width: 100%;
    height: 100%;
    filter: brightness(1) blur(0.3em);
    opacity: 0.1;
}

.pda-lamp-wrapper .glow2::before {
    clip-path: polygon(
        9.21% 83%, 12.28% 79%, 15.35% 74%, 18.41% 68%, 20.46% 62%, 22.51% 56%,
        23.53% 50%, 24.55% 43%, 25.58% 34%, 26.6% 29%, 27.62% 22%, 29.16% 18.5%,
        30.95% 15.75%, 32.74% 13%, 34.78% 10%, 37.85% 7%, 41.94% 5%, 45.01% 4%,
        48.08% 3%, 52.17% 3%, 56.27% 3%, 64.01% 6.36%, 55.75% 4.5%, 47.83% 4.75%,
        42.84% 5.88%, 39.51% 7.88%, 36.45% 10.38%, 33.38% 14.88%, 30.69% 19%,
        29.67% 22.5%, 28.8% 26.72%, 28.21% 31.36%, 26.92% 38.44%, 26.57% 43.67%,
        25.51% 48.34%, 25% 54.34%, 23.4% 60.69%, 21.23% 65.38%, 18.41% 71.5%,
        16.88% 74.75%, 12.28% 80.5%
    );
    width: 100%;
    height: 84%;
    translate: -1em 8.4em;
    scale: 1;
    background: #fff3;
    display: block;
    content: "";
}

.pda-lamp-wrapper .left-glow {
    --lgc: #5d819666;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    translate: 0 -24%;
    background: transparent;
    box-shadow: inset 1em 0em 1em 0.2em var(--lgc);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.pda-lamp-wrapper .left-glow2 {
    --lgc2: #5d819666;
    width: 49%;
    height: 50%;
    background-image: radial-gradient(
        circle at -80% -12%,
        transparent 50em,
        var(--lgc2) 50.3em,
        transparent 52em
    );
    position: absolute;
    translate: -19em 10.35em;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 78%);
}

.pda-lamp-wrapper .r-glow {
    --lgc: #fffaf680;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    translate: 0 -24%;
    background: transparent;
    box-shadow: inset 1em 0em 1em 0.2em var(--lgc);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    transform: rotateY(180deg);
}

.pda-lamp-wrapper .r-glow2 {
    --lgc2: #fffaf680;
    width: 49%;
    height: 50%;
    background-image: radial-gradient(
        circle at -80% -12%,
        transparent 50em,
        var(--lgc2) 50.3em,
        transparent 52em
    );
    position: absolute;
    translate: 18.2em 10.35em;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 78%);
    transform: rotateY(180deg) rotateZ(-2deg);
}

.pda-lamp-wrapper .mid-ring.small {
    translate: 0.04em -8em;
    scale: 0.8 0.5;
}

.pda-lamp-wrapper .mid-ring {
    width: 64%;
    height: 10%;
    border-radius: 50%;
    translate: -0.1em 10em;
    box-shadow: inset -0.3em 1.3em 0.4em -1em #fff5,
        -0.2em -1.2em 0.4em -0.4em #505050, -0.1em -1.8em 0.4em -0.4em #fff5,
        0 -2.5em 0.4em -1em #000000;
    mix-blend-mode: hard-light;
    filter: brightness(0.8);
}

.pda-lamp-wrapper .mid-ring::before,
.pda-lamp-wrapper .mid-ring::after {
    content: "";
    display: block;
    background: #000;
    width: 2em;
    height: 2em;
    top: 10%;
    border-radius: 50%;
    position: absolute;
}

.pda-lamp-wrapper .mid-ring::after { right: -2%; }
.pda-lamp-wrapper .mid-ring::before { left: -2%; }

.pda-lamp-wrapper .bell-buff-t {
    background: #fff2;
    width: 72%;
    height: 12%;
    border-radius: 50%;
    translate: 0 16em;
    filter: blur(1em);
}

.pda-lamp-wrapper .bell-buff {
    background: linear-gradient(90deg, black 40%, var(--base-clr) 90%);
    width: 88%;
    height: 20%;
    border-radius: 50% 50% 50% 50% / 50% 50% 30% 30%;
    translate: 0 20em;
    box-shadow: inset 1em 0 2em -1em #5d819666, inset -1em 0 2em -1em #fff;
}

.pda-lamp-wrapper .bell-btm {
    width: 88%;
    height: 18%;
    border-radius: 50%;
    translate: 0 23em;
    background: linear-gradient(90deg, black 40%, var(--base-clr) 90%);
}

.pda-lamp-wrapper .bell-btm2 {
    width: 74%;
    height: 12%;
    border-radius: 50%;
    translate: 0 24em;
    background: #fffff6;
    box-shadow: 0 0 1em 0.6em #ffe9d4, -0.8em 0.2em 2em 1em #cca37f,
        -5.4em -0.6em 3em -1em #ce6e1abb, 6em -0.6em 3em -1em #ce6e1abb,
        inset 0em 30.3em 0.3em -30em #c7962d, inset 0 -2em 2em -2em #ffe9d4,
        inset 0em -1em 2em 1em #ce6e1a66;
    filter: brightness(1);
}

.pda-lamp-wrapper.off .bell-btm2 {
    filter: brightness(0.02);
}

.pda-lamp-wrapper .bell-ring-container {
    width: 74%;
    height: 24%;
    border-radius: 50% 50% 50% 50% / 25% 25% 0% 0%;
    translate: 0 29.2em;
    overflow: hidden;
}

.pda-lamp-wrapper .bell-ring {
    width: 12em;
    height: 12em;
    background: #fff;
    border-radius: 50%;
    translate: 0 -6em;
    box-shadow: 0 0.8em 1em -0.3em #f8e1d0, inset 0 -6em 4em -4em #e3b695,
        inset 0 1em 3em 1em #fff4, inset 0 2em 3em 1em #fff,
        inset 0 100em 0 100em #2c2c2c;
}

.pda-lamp-wrapper.off .bell-ring {
    background: #000;
    box-shadow: 0 0.8em 1em -0.3em #f8e1d000, inset 0 -6em 4em -4em #e3b69500,
        inset 0 1em 3em 1em #fff0, inset 0 -2em 3em 1em #fff2,
        inset 0 100em 0 100em #000;
}

.pda-lamp-wrapper .bell-rays {
    mix-blend-mode: soft-light;
    box-shadow: inset 0 -21em 4em -20em #000;
    width: 100%;
    height: 140%;
    translate: 0 -4em;
    border-radius: 50%;
}

.pda-lamp-wrapper .bell-rays::before {
    content: "";
    display: block;
    width: 100em;
    height: 100em;
    transform-origin: 50% 50%;
    position: absolute;
    left: -21em;
    top: -77em;
    border-radius: 100%;
    filter: blur(0.6em);
    background: repeating-conic-gradient(
        at 50% 50%,
        #fff2 0%,
        transparent 0.6%,
        #fff2 0.8%
    );
    animation: radiate 1s linear infinite;
}

.pda-lamp-wrapper.off .bell-rays {
    opacity: 0;
}

.pda-lamp-wrapper .volumetric {
    width: 98%;
    height: 224%;
    translate: 0 124em;
    opacity: 0.2;
}

.pda-lamp-wrapper .volumetric .vl {
    width: 100%;
    height: 100%;
    transform-origin: 50% 20em;
    rotate: 22deg;
    box-shadow: inset 40em 0 20em -20em #fff1;
}

.pda-lamp-wrapper .volumetric .vr {
    width: 100%;
    height: 100%;
    transform-origin: 50% 20em;
    rotate: -22deg;
    box-shadow: inset -40em 0 20em -20em #fff1;
}

.pda-lamp-wrapper.off .volumetric {
    opacity: 0;
}

/* =========================================================
   TEXT HINT & ANIMATIONS
========================================================= */

.pda-lamp-hint {
    font-size: 0.875rem;
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #b7b5b4;
    text-transform: uppercase;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.pda-lamp-button:hover .pda-lamp-hint {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.pda-lamp-button.pda-lamp-pulled .pda-lamp-wrapper {
    animation: pdaLampPull 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes bell {
    0%, 100% { rotate: calc(1deg * var(--degofrot)); }
    50% { rotate: calc(-1deg * var(--degofrot)); }
}

@keyframes radiate {
    0% { rotate: 0deg; }
    100% { rotate: 6deg; }
}

@keyframes pdaLampPull {
    0% { transform: translateY(0); }
    25% { transform: translateY(18px); }
    50% { transform: translateY(-6px); }
    75% { transform: translateY(4px); }
    100% { transform: translateY(0); }
}



/* =========================================================
   NEXT CASE CARD
========================================================= */

.pda-next-case-popup {

    width: 330px;

    max-width: calc(100vw - 40px);

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

    padding: 9px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #162536,
            #0b141e
        );

    border: 1px solid rgba(198,161,91,.42);

    box-shadow:
        0 20px 45px rgba(0,0,0,.5);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(12px)
        scale(.96);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}


.pda-next-case-popup.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* top */

.pda-popup-top {

    display: flex;

    justify-content: space-between;

    padding: 2px 3px 7px;

    margin-bottom: 7px;

    border-bottom: 1px solid rgba(255,255,255,.06);

    color: var(--pda-gold);

    font-family: 'Noto Sans Mono', monospace;

    font-size: 7px;

    letter-spacing: 1px;
}


/* link */

.pda-popup-body {

    display: flex;

    align-items: center;

    gap: 11px;

    color: inherit !important;

    text-decoration: none !important;

    transition: transform .2s ease;
}


.pda-popup-body:hover {

    transform: translateX(3px);
}


/* related poster */

.pda-popup-img {

    flex: 0 0 55px;

    width: 55px;

    height: 70px;

    overflow: hidden;

    background: #080f17;

    border: 1px solid rgba(198,161,91,.3);
}


.pda-popup-img img {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    margin: 0 !important;

    padding: 0 !important;

    transition: transform .3s ease;
}


.pda-popup-body:hover .pda-popup-img img {

    transform: scale(1.05);
}


/* details */

.pda-popup-details {

    flex: 1;

    min-width: 0;
}


.pda-popup-small {

    display: block;

    margin-bottom: 4px;

    color: rgba(198,161,91,.55);

    font-family: 'Noto Sans Mono', monospace;

    font-size: 7px;

    letter-spacing: 1px;
}


.pda-popup-details h4 {

    margin: 0 0 7px !important;

    color: #eee9df !important;

    font-family: Georgia, serif !important;

    font-size: 15px !important;

    font-weight: normal !important;

    line-height: 1.2;
}


.pda-investigate {

    color: var(--pda-gold);

    font-family: 'Noto Sans Mono', monospace;

    font-size: 7px;

    letter-spacing: 1px;
}


.pda-investigate strong {

    font-size: 11px;

    margin-left: 3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

    .pda-product-grid {

        grid-template-columns: 1fr;

        gap: 45px;

        max-width: 600px;
    }


    .pda-gallery-section {

        max-width: 440px;
    }


    .pda-info-section {

        max-width: 100%;
    }
}


@media (max-width: 500px) {

    .pda-single-product-wrapper {

        padding:
            35px 18px 70px;
    }


    .pda-main-image-frame {

        width: min(100%, 330px);
    }


    .pda-thumbs-wrapper {

        width: min(100%, 330px);
    }


    .pda-thumb-item {

        flex-basis: 48px !important;

        width: 48px !important;

        min-width: 48px !important;

        height: 48px !important;
    }


    .pda-product-title {

        font-size: 32px !important;
    }


    .pda-next-case-popup {

        width: 300px;
    }
}

/* FIX LAMP CENTERING */
.pda-lamp-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pda-lamp-wrapper {
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform-origin: 50% -20vh;
}