.splide-gallery { position: relative; display: inline-block; }
            .splide-trigger { cursor: pointer; position: relative; overflow: hidden; }
            .splide-open-gallery { width: 100%; height: 100%; object-fit: cover; display: block; }
            .splide-image-label { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.75); color: #fff; font-size: 13px; font-weight:600; padding: 6px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; pointer-events: none; z-index: 5; }
            .splide-image-count { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.7); color: #fff; font-size: 13px; font-weight:600; padding: 6px 10px; border-radius: 4px; pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px; z-index: 5; }
            .modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.85); justify-content: center; align-items: center; }
            .modal.active { display: flex; }
            .modal-content { background: #000; width: 90%; max-width: 900px; padding: 20px; position: relative; box-sizing: border-box; }
            .modal-close { position: absolute; top: 10px; right: 15px; color: #fff; font-size: 28px; cursor: pointer; }
            .splide-main img { width: 100%; height: auto; object-fit: contain; max-height: 80vh; display: block; }
            .splide-thumbs { width: 100%; margin-top: 15px; }
            .splide-thumbs .splide__slide { opacity: 0.5; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; transition: opacity 0.2s, border-color 0.2s; }
            .splide-thumbs .splide__slide.is-active { opacity: 1; border-color: #007aff; }
            .splide-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
            @media (max-width: 768px) { .splide-thumbs { display: none; } }