/* Кнопка открытия — стилизуем как элемент интерфейса */
        .open-btn {
            background: #2c2c34;
            border: none;
            padding: 14px 32px;
            border-radius: 48px;
            font-size: 1.1rem;
            font-weight: 500;
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            backdrop-filter: blur(4px);
            background: #2a2a33cc;
            border: 1px solid #4c6eff40;
        }

        .open-btn:hover {
            background: #3a3a46;
            transform: scale(1.01);
            border-color: #6c8aff;
        }

        /* --- Лайтбокс в стиле Яндекс.Картинки --- */
        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.92);
            backdrop-filter: blur(12px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0.2s, opacity 0.2s ease;
        }
        

        /* цель: когда элемент с id="modal" становится целью — показываем окно */
        .lightbox:target {
            visibility: visible;
            opacity: 1;
        }

        /* главный контейнер модалки: имитация карточки яндекс-картинок */
        .modal-container {
            max-width: 1300px;
            width: 90%;
            background: #0f0f14;
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 30px 50px rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border: 1px solid #2e2e3a;
            animation: fadeScale 0.2s ease-out;
        }

        /* левая/правая часть — фото занимает 2/3, описание 1/3 (как в веб-версии яндекс картинок) */
        .image-area {
            flex: 2.2;
            min-width: 250px;
            background: #00000030;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .image-area img {
            width: 100%;
            height: auto;
            max-height: 70vh;
            object-fit: contain;
            border-radius: 24px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
            transition: transform 0.1s ease;
        }

        /* описание товара — сбоку, в стиле «Информация о фото» как в яндексе */
        .info-area {
            flex: 1.2;
            min-width: 260px;
            background: #121217;
            padding: 28px 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            border-left: 1px solid #2a2a30;
        }

        .badge-category {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #8f9eff;
            background: #262632;
            display: inline-block;
            width: fit-content;
            padding: 4px 12px;


border-radius: 40px;
        }

        .title {
            font-size: 1.8rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.3px;
        }

        .description {
            color: #cbcbe0;
            line-height: 1.5;
            font-size: 0.95rem;
            margin-top: 8px;
        }

        .price-block {
            margin-top: 12px;
            background: #1b1b24;
            border-radius: 28px;
            padding: 16px 20px;
        }

        .current-price {
            font-size: 2rem;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: -0.5px;
        }

        .old-price {
            font-size: 1rem;
            color: #8e8ea6;
            text-decoration: line-through;
            margin-left: 10px;
        }

        .rating {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 8px 0;
        }

        .stars {
            color: #ffb83b;
            letter-spacing: 2px;
            font-size: 1.1rem;
        }

        .reviews {
            color: #9c9cb0;
            font-size: 0.85rem;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            margin-top: 12px;
            flex-wrap: wrap;
        }

        .btn-primary {
            background: #4c6eff;
            border: none;
            padding: 12px 20px;
            border-radius: 40px;
            font-weight: 500;
            color: white;
            font-size: 0.9rem;
            cursor: pointer;
            transition: 0.1s linear;
            text-align: center;
            flex: 1;
        }

        .btn-primary:hover {
            background: #6b86ff;
        }

        .btn-secondary {
            background: #2c2c38;
            border: 1px solid #46465a;
            padding: 12px 20px;
            border-radius: 40px;
            font-weight: 500;
            color: #eef2ff;
            cursor: pointer;
            transition: 0.1s;
            text-align: center;
            flex: 1;
        }

        .btn-secondary:hover {
            background: #3d3d4c;
        }

        /* Кнопка закрытия (крестик) */
        .close-modal {
            position: absolute;
            top: 24px;
            right: 32px;
            background: #1f1f2ae6;
            color: white;
            font-size: 28px;
            font-weight: 300;
            width: 48px;
            height: 48px;
            border-radius: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            backdrop-filter: blur(8px);
            transition: 0.1s;
            border: 1px solid #ffffff30;
            font-family: monospace;
        }

        .close-modal:hover {
            background: #e5484d;
            transform: scale(1.02);
            border-color: #ff8888;
        }

        /* универсальный крестик, плюс возможность закрыть кликом по фону — но фон = .lightbox и при клике на него не закрывается? 
           Поставим дополнительный элемент: если кликнуть мимо контента — закрыть по ссылке # (закрытие модалки) */
        .lightbox {
            cursor: pointer;
        }

        .modal-container {
            cursor: default;
            pointer-events: auto;
        }

        /* анимация при открытии */
        @keyframes fadeScale {
            from {
                opacity: 0;
                transform: scale(0.96);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* адаптив: на планшетах и телефонах описание уезжает под фото */


        /* тултип подсказка */
        .helper {
            margin-top: 40px;
            text-align: center;
            font-size: 0.8rem;
            background: #23232b80;
            padding: 8px 18px;
            border-radius: 32px;
            backdrop-filter: blur(4px);
            color: #bebece;
        }

        hr {
            margin: 10px 0;
            border-color: #2e2e3a;
        }

        /* простая вёрстка для демонстрации: контент по центру */
        .demo-wrap {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .demo-note {
            font-size: 0.9rem;
            max-width: 500px;
            background: #12121770;
            padding: 16px 24px;
            border-radius: 48px;
            backdrop-filter: blur(4px);
        }