/** Shopify CDN: Minification failed

Line 93:8 Unexpected "{"
Line 93:9 Expected identifier but found "%"
Line 95:29 Unexpected "{"
Line 95:30 Expected identifier but found "%"
Line 103:8 Unexpected "{"
Line 103:9 Expected identifier but found "%"
Line 103:43 Unexpected "{"
Line 103:44 Expected identifier but found "%"

**/
:root {
        --wheel-size: min(45vh, 320px); /* main wheel size */
        --arrow-scale: 0.19; /* arrow size relative to wheel */
        --btn-width: 150px; /* spin button width */
        --pad: 20px; /* right panel padding */
    }

    .demo {
        min-height: 100vh;
        display: grid;
        place-items: center
    }

    .open-btn {
        padding: 14px 22px;
        border-radius: 999px;
        border: 0;
        font-weight: 800;
        letter-spacing: .5px;
        color: #fff;
        background: #ff8b3d;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
        cursor: pointer
    }

    /* Modal */
    .sv-modal {
        position: fixed;
        inset: 0;
        display: none;
        z-index: 50;
        box-sizing: border-box;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    .sv-modal[aria-hidden="false"] {
        display: block
    }

    .sv-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .6);
        backdrop-filter: blur(2px)
    }

    /* Modal Card */
    .sv-card {
        position: relative;
        z-index: 1;
        width: min(1000px, 96vw);
        height: min(92vh, 720px);
        margin: max(3vh, 16px) auto;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        display: grid;
        grid-template-columns:auto 1fr;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .35)
    }

    .sv-close {
        position: absolute;
        right: 14px;
        top: 10px;
        width: 36px;
        height: 36px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        z-index: 5;
        cursor: pointer;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .5)
    }

    /* Left panel (poster) */
    .sv-left {
        background: #ddeaf2;
        {% comment %} display: flex;
        justify-content: center;
        align-items: center; {% endcomment %}
        overflow: hidden;
        position: relative;
    }

    .sv-left img {
        height: 100%;
        width: 100%;
        {% comment %} object-fit: contain; {% endcomment %}
        object-fit: cover; /* isi penuh, tanpa space kiri-kanan */
        object-position: center; /* tetap fokus tengah */
    }

    /* Right panel (spin area) */
    .sv-right {
        position: relative;
        background: #f6a161;
        color: #fff;
        padding: var(--pad);
        display: grid;
        grid-template-rows:auto auto auto 1fr auto;
        justify-items: center;
        gap: 10px;
        overflow-y: scroll;
        max-height: calc(92vh - 5px);
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer and Edge */
    }

    .sv-right::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .sv-brand {
        font-weight: 600;
        margin-top: 6px
    }

    .sv-title {
        margin: .25rem 0 0;
        font-weight: 900;
        line-height: 1.05;
        text-align: center;
        font-size: clamp(26px, 3.2vw, 46px);
        text-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        color: white;
    }

    .sv-subtitle {
        opacity: .95;
        margin: .5rem 0 1rem;
        font-weight: 600
    }

    /* Wheel */
    .wheel-wrap {
        position: relative;
        width: var(--wheel-size);
        aspect-ratio: 1/1;
        margin-bottom: 30px;
    }

    .wheel {
        width: 100%;
        height: 100%;
        display: block;
        filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25));
        transform: rotate(var(--angle, 0deg));
        transition: transform var(--duration, 2s) cubic-bezier(.17, .67, .26, 1.17)
    }

    .arrow {
        position: absolute;
        width: 30px;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        pointer-events: none;
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35))
    }

    .wheel-wrap .sv-spin {
        position: absolute;
        left: 50%;
        bottom: 5%;
        transform: translateX(-50%);
        border: 0;
        background: transparent;
        cursor: pointer;
        display: grid;
        place-items: center;
        z-index: 3
    }

    .wheel-wrap .sv-spin img {
        width: var(--btn-width)
    }

    /* Spin button */
    .sv-spin {
        border: 0;
        background: transparent;
        cursor: pointer;
        display: grid;
        place-items: center
    }

    .sv-spin img {
        width: var(--btn-width);
    }

    .sv-spin:disabled {
        opacity: .7;
        filter: grayscale(.2);
        cursor: not-allowed
    }

    /* Result box */
    .sv-result {
        margin-top: auto;
        margin-bottom: 40px;
        background: rgba(255, 255, 255, .22);
        color: white;
        font-weight: 800;
        border-radius: 14px;
        padding: 10px 14px;
        display: inline-block;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
        backdrop-filter: blur(4px)
    }

    /* Responsive */
    @media (max-width: 860px) {
        .sv-card {
            grid-template-columns:1fr
        }

        .sv-left {
            display: none
        }

        .sv-right {
            grid-template-rows:auto auto auto auto auto auto
        }
    }