@media (min-width: 979px) {
        #projector_producttraits {
            text-align: center;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }

        .traits__values {
            display: block;
            text-align: center;
            max-width: 50%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 3px;
        }

        .traits__value.--gfx {
            padding: 0 2rem;
        }

        .top_15 {
            margin-top: 20px;
        }
    }


    .fota_zakladka {
        vertical-align: middle;
        margin-top: 40px;
        padding-right: 15px;
        float: right;
        width: 300px;
    }

    .tytul_dzialu {
        justify-content: normal;
        font-size: 2.3rem;
        text-decoration: none;
        text-transform: none;
        font-weight: normal;
        letter-spacing: 1px;
        margin-bottom: 0;
    }

    .lewa_margin {
        margin-left: 15px;
    }

    .cm h2 {
        font-size: 1.3em;
    }

    .guzik_prawo {
        margin-top: 10px;
        padding-right: 0;
        text-align: right;
    }

    .dol_border {
        padding-bottom: 30px;
    }

    .center {
        text-align: center;
    }

    .dictionary__name {
        width: 50%;
        float: right;
        text-align: right;
        margin-right: 10px !important;
    }

    .kontener > input:checked + label {
        font-weight: 600;
        color: #ed5d5d;
    }

    .dictionary__value {
        width: 50%;
        float: left;
        text-align: left;
        margin-left: 10px !important;
    }

    #projector_dictionary {
        margin-top: 20px;
    }

    .dictionary__param {
        margin-bottom: 1.1rem !important;
    }

    .prawa_zdjecie {
        text-align: right;
    }

    .holo_prawa {
        max-width: 400px;
    }

    .hologram-border {
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #8e44ad, #3498db, #e74c3c) 1;
    border-image-slice: 1;
    padding: 2rem 3rem;
    }

    @media (min-width: 979px) {
        .top_15 {
            margin-top: 20px;
        }
    }

    .lewa_margin {
        margin-left: 15px;
    }

    .center {
        text-align: center;
    }

    *,
    ::after,
    ::before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .opis_details {
        font-size: 15px !important;
        overflow: hidden;
    }

    div.row_block {
        margin-right: 0;
        margin-left: 0;
    }

    .opis_details p {
        font-size: 1.6rem;
        line-height: 24px;
        margin-top: 10px;
    }

    .opis_list ul {
        margin: 0 0 0 20px;
        padding: 0;
    }

    .opis_list ul li {
        padding: 3px 0;
        line-height: 23px;
        font-size: 1.6rem;
        list-style-type: none !important;
    }

    .opis_list ul li:before {
        content: "\f00c";
        margin-right: 10px;
        font-family: FontAwesome;
        color: #0184a0;
    }

    .top_40 {
        margin-top: 50px;
    }

    .top_70 {
        margin-top: 70px;
    }

    .top_30 {
        margin-top: 0;
        margin-bottom: 20px;
    }

    @media (max-width: 979px) {
        .lewa {
            padding-left: 0;
            padding-right: 0;
        }

        .lewa > h2 {
            margin-top: 0;
        }

        .pierwszy {
            order: 1;
        }

        .drugi {
            order: 2;
        }

        .top_40 {
            margin-top: 0;
        }

        .top_70 {
            margin-top: 0;
        }

        .top_30 {
            margin-top: 0;
        }

        .kom_center {
            text-align: center;
        }

        .bottom_25_kom {
            margin-bottom: 25px;
        }

        .lewa_margin {
            margin-top: 0;
        }
    }

    .top_44 {
        margin-top: 44px;
        padding-left: 0;
    }

    .top_76 {
        margin-top: 60px;
    }

    .holo_fota {
        width: 75%;
    }
    .opis_details span {
        display: block;
        font-size: 1.6rem;
        line-height: 24px;
    }


:root {
    --sticker-image: url('https://print4u.pl/data/include/cms/print4u/n4.png');
    --underprint-mask-image: url('https://print4u.pl/data/include/cms/print4u/n4-mask.png');
    --sparkles-gif: url("https://assets.codepen.io/13471/sparkles.gif");
    --brokat-bg-2: url('https://print4u.pl/data/include/cms/print4u/bg2_brokat.jpg');
}

.interactive-sticker-container {
    user-select: none;
    max-width: 450px;
    margin: 0 auto;
    padding: 20px 10px 20px 10px;
    background: #f0f0f0;
    border-radius: 8px;
    position: relative;
}

.holographic-sticker-wrapper {
    width: 100%;
    display: flex;
    position: relative; 
    justify-content: center;
    align-items: center;
    cursor: pointer;
    filter: drop-shadow(var(--shadow-x, 0px) var(--shadow-y, 8px) var(--shadow-blur, 12px) rgba(0,0,0,0.25));
    transition: filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#play-stop-button {
    position: absolute;
    top: 20px;
    left: 20px; /* Dostosowane położenie */
    z-index: 10;
    width: 60px;
    height: 60px;
    cursor: pointer;
}
@media (max-width: 979px) { #play-stop-button { left: 15px; top: 5px; } }
@media (max-width: 400px) { #play-stop-button { left: 5px; } }


#play-stop-button .icon-shape {
    fill: #f4a3a3;
    transition: fill 0.3s ease;
}

.interactive-sticker-container:hover #play-stop-button .icon-shape,
#play-stop-button:hover .icon-shape {
    fill: #ed5d5d;
}

#play-stop-button .stop-icon { display: none; }
#play-stop-button .play-icon { display: block; }
#play-stop-button.playing .stop-icon { display: block; }
#play-stop-button.playing .play-icon { display: none; }


.holographic-sticker {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 1000 / 1200; /* Dopasowane do wzoru n2 */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, filter;
    transform: rotateX(var(--rotX, 0deg)) rotateY(var(--rotY, 0deg));
    isolation: isolate;
    -webkit-mask-image: var(--sticker-image);
    mask-image: var(--sticker-image);
    mask-size: contain; mask-position: center; mask-repeat: no-repeat;
}

.holographic-sticker::before, .holographic-sticker::after, .holographic-sticker > div {
    content: ""; position: absolute; inset: -2px; pointer-events: none; transition: opacity 0.4s ease-out;
}

.holographic-sticker::before {
    background-image: linear-gradient(var(--angle, 90deg), transparent, var(--color1, #c0c0c0), var(--color2, #ffffff), transparent);
    background-position: var(--holo-pos, 50% 50%); background-size: 350% 350%;
    mix-blend-mode: color-dodge;
    opacity: var(--main-opacity, 0); filter: brightness(var(--brightness)) contrast(var(--contrast));
    z-index: 1;
}

.holographic-sticker__bg {
    background-image: var(--holo-bg-image);
    background-size: var(--holo-bg-size);
    background-position: var(--holo-pos, 50% 50%);
    transform: rotate(var(--holo-bg-rotation, 0deg));
    mix-blend-mode: overlay;
    z-index: 2; 
    opacity: var(--holo-bg-opacity, 0);
}

.holographic-sticker__sparkles {
    background-image: var(--sparkle-source, none);
    background-position: var(--sparkle-pos, 50% 50%); background-size: 180%;
    mix-blend-mode: color-dodge;
    filter: brightness(2.0);
    z-index: 3;
    opacity: var(--sparkle-opacity, 0);
}

.holographic-sticker__underprint {
    background: white;
    mask-image: var(--underprint-mask-image); -webkit-mask-image: var(--underprint-mask-image);
    mask-size: contain; mask-position: center; mask-repeat: no-repeat;
    opacity: var(--underprint-opacity, 0);
    z-index: 4;
}

.holographic-sticker::after {
    background-image: var(--sticker-image);
    background-size: contain; background-position: center; background-repeat: no-repeat;
    mix-blend-mode: multiply;
    z-index: 5;
}

.holographic-sticker__glare {
    background-image: radial-gradient(farthest-corner circle at var(--glare-pos-x, 50%) var(--glare-pos-y, 50%), hsla(0,0%,100%,var(--glare-intensity, 0.8)) 0%, hsla(0,0%,100%,0) 40%);
    mix-blend-mode: screen;
    opacity: var(--glare-opacity, 0);
    z-index: 6;
}

input[type="checkbox"] { display: none; }
.sticker-controls-dock {
    position: relative;
    padding-top: 10px;
    width: 100%;
}

.sticker-joystick {
    width: 90px; height: 90px; cursor: grab; flex-shrink: 0;
    touch-action: none;
    display: block;
    margin: 0 auto;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease-out;
}

.sticker-joystick.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.joystick-fill { fill: #ed5d5d; }
.joystick-arrow { fill: #fff; opacity: 0.7; }
.joystick-dot { transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.sticker-joystick:hover { transform: scale(1.05); }
.sticker-joystick:hover .joystick-arrow { opacity: 1; }
.sticker-joystick:active { cursor: grabbing; transform: scale(0.95); }

.switches-group {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
@media (max-width: 979px) { .switches-group { right: 5px; } }
@media (max-width: 400px) { .switches-group { right: 0; } }

.master-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.7);
    border-radius: 20px;
    min-width: 135px;
    justify-content: space-between;
    box-sizing: border-box;
}
.master-toggle__label { font-size: 14px; font-weight: 500; color: #333; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #7d848c; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #0184a0; }
input:checked + .slider:before { transform: translateX(20px); }

/* Klasa wyłączająca efekty */
.holographic-sticker.effects-disabled {
    transform: rotateX(0deg) rotateY(0deg) !important;
}
.holographic-sticker.effects-disabled .holographic-sticker-wrapper {
     filter: none !important;
}

.holographic-sticker.effects-disabled::before,
.holographic-sticker.effects-disabled .holographic-sticker__underprint,
.holographic-sticker.effects-disabled .holographic-sticker__glare,
.holographic-sticker.effects-disabled .holographic-sticker__sparkles,
.holographic-sticker.effects-disabled .holographic-sticker__bg {
    opacity: 0 !important;
}
.holographic-sticker.effects-disabled::after {
    mix-blend-mode: normal;
}