/* ── Commission Detail Page ── */

        body {
            background: #f8f8f8;
        }

        .commission-detail-page {
            padding-top: 220px; /* clear fixed header */
        }

        /* ── Back Link ── */
        .detail-back {
            max-width: 1200px;
            margin: 0 auto;
            padding: 100px 60px 30px;
        }

        .detail-back a {
            color: var(--text-dark);
            text-decoration: none;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 1px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: color 0.3s ease;
        }

        .detail-back a:hover {
            color: #b66e41;
        }

        /* ── Title ── */
        .detail-title {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 60px 50px;
        }

        .detail-title h1 {
            font-family: var(--primary-font);
            font-size: 42px;
            font-weight: 600;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--text-dark);
        }

        /* ── Hero Images – Two large images side by side ── */
        .detail-hero-images {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 60px 50px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .detail-hero-images .hero-img {
            width: 100%;
            aspect-ratio: 2/3;
            object-fit: cover;
            display: block;
        }

        /* ── Credits Block ── */
        .detail-credits {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 60px 60px;
        }

        .credits-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .credits-list p {
            font-size: 16px;
            font-weight: 300;
            color: var(--text-dark);
            letter-spacing: 0.5px;
            line-height: 1.8;
        }

        .credits-list p strong {
            font-weight: 500;
        }

        /* ── Full Gallery Grid ── */
        .detail-gallery {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 60px 100px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .detail-gallery .gallery-img {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
            display: block;
            transition: opacity 0.3s ease, transform 0.5s ease;
            cursor: pointer;
        }

        .detail-gallery .gallery-img:hover {
            opacity: 0.88;
            transform: scale(1.02);
        }

        /* ── Lightbox ── */
        .lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.92);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .lightbox.open {
            display: flex;
        }

        .lightbox img {
            max-width: 90vw;
            max-height: 90vh;
            object-fit: contain;
        }

        .lightbox-close {
            position: absolute;
            top: 30px;
            right: 40px;
            color: white;
            font-size: 36px;
            cursor: pointer;
            line-height: 1;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .lightbox-close:hover {
            opacity: 1;
        }

        .lightbox-prev,
        .lightbox-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 40px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.2s;
            padding: 20px;
            user-select: none;
        }

        .lightbox-prev { left: 20px; }
        .lightbox-next { right: 20px; }

        .lightbox-prev:hover,
        .lightbox-next:hover {
            opacity: 1;
        }

        /* ── Responsive ── */
        @media (max-width: 968px) {
            .commission-detail-page { padding-top: 160px; }

            .detail-back,
            .detail-title,
            .detail-hero-images,
            .detail-credits,
            .detail-gallery { padding-left: 30px; padding-right: 30px; }

            .detail-title h1 { font-size: 28px; }

            .detail-gallery { grid-template-columns: repeat(2, 1fr); }

            .footer-main { flex-direction: column; gap: 30px; }
            .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
        }

        @media (max-width: 600px) {
            .detail-hero-images { grid-template-columns: 1fr; }
            .detail-gallery { grid-template-columns: 1fr; }
            .detail-title h1 { font-size: 22px; letter-spacing: 2px; }
        }