/* ── Back button ── */
    .gv-back-btn {
        display: inline-flex; align-items: center;
        padding: 10px 22px; border-radius: 50px;
        background: #0b1f3a; color: #fff;
        text-decoration: none; font-size: 14px; font-weight: 700;
        transition: background .2s;
    }
    .gv-back-btn:hover { background: #d32f2f; color: #fff; }

    /* ── Counter pill ── */
    .gv-counter-pill {
        font-size: 13px; font-weight: 700; color: #64748b;
        background: #fff; padding: 8px 20px; border-radius: 50px;
        box-shadow: 0 2px 10px rgba(0,0,0,.08);
        letter-spacing: .5px;
    }

    /* ── Main image card ── */
    .gv-main-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 4px 24px rgba(0,0,0,.09);
        position: relative;
        overflow: hidden;
        min-height: 420px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: zoom-in;
    }

    .gv-img-area {
        display: flex; align-items: center; justify-content: center;
        width: 100%; padding: 32px 72px;
        position: relative;
    }

    .gv-main-img {
        max-width: 100%;
        max-height: 520px;
        object-fit: contain;
        display: block;
        border-radius: 10px;
        transition: opacity .18s ease, transform .3s ease;
    }
    .gv-main-img:hover { transform: scale(1.02); }
    .gv-main-img.gv-fade { opacity: 0; }

    .gv-zoom-hint {
        position: absolute; bottom: 14px; right: 14px;
        background: rgba(255,255,255,.9);
        border-radius: 50%; width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        color: #64748b; font-size: 14px;
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
        opacity: 0; transition: opacity .3s;
    }
    .gv-main-card:hover .gv-zoom-hint { opacity: 1; }

    /* Nav arrows on image */
    .gv-nav-btn {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 44px; height: 44px; border-radius: 50%;
        border: none; background: #fff;
        box-shadow: 0 3px 14px rgba(0,0,0,.15);
        color: #0b1f3a; font-size: 17px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background .2s, color .2s;
        z-index: 2;
        opacity: 0; transition: opacity .3s, background .2s, color .2s;
    }
    .gv-main-card:hover .gv-nav-btn { opacity: 1; }
    .gv-nav-btn:hover { background: #0b1f3a; color: #fff; }
    .gv-nav-left  { left: 14px; }
    .gv-nav-right { right: 14px; }

    /* ── Thumbnail strip ── */
    .gv-thumbs-wrap {
        background: #fff;
        border-radius: 16px;
        padding: 12px 14px;
        box-shadow: 0 2px 12px rgba(0,0,0,.07);
    }
    .gv-thumbs {
        display: flex; gap: 8px;
        overflow-x: auto; flex-wrap: nowrap;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
        padding-bottom: 2px;
    }
    .gv-thumbs::-webkit-scrollbar { height: 3px; }
    .gv-thumbs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

    .gv-thumb {
        flex-shrink: 0; width: 82px; height: 64px;
        border-radius: 10px; overflow: hidden;
        border: 2.5px solid transparent;
        background: none; padding: 0; cursor: pointer;
        opacity: .52; transition: opacity .2s, border-color .2s, transform .2s;
    }
    .gv-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .gv-thumb:hover { opacity:.82; transform: scale(1.06); }
    .gv-thumb.gv-active { border-color: #d32f2f; opacity: 1; }

    /* ── Info card (right side) ── */
    .gv-info-card {
        background: #fff;
        border-radius: 20px;
        padding: 28px 24px;
        box-shadow: 0 4px 24px rgba(0,0,0,.09);
        position: sticky;
        top: 90px;
    }

    .gv-info-counter {
        font-size: 12px; font-weight: 700;
        color: #94a3b8; letter-spacing: .8px;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .gv-info-title {
        font-size: 22px; font-weight: 800;
        color: #0b1f3a; margin: 0 0 0;
        line-height: 1.35;
    }

    .gv-info-divider {
        width: 44px; height: 3px;
        background: #d32f2f;
        border-radius: 2px;
        margin: 16px 0;
    }

    .gv-info-desc {
        font-size: 15px; color: #64748b;
        line-height: 1.75; margin: 0;
    }

    /* ── Fullscreen lightbox ── */
    .gv-lightbox {
        display: none;
        position: fixed; inset: 0; z-index: 9999;
        align-items: center; justify-content: center;
    }
    .gv-lightbox.gv-lb-open { display: flex; }

    .gv-lightbox-backdrop {
        position: absolute; inset: 0;
        background: rgba(0,0,0,.94);
        backdrop-filter: blur(5px);
    }

    .gv-lb-img {
        position: relative; z-index: 1;
        max-width: 92vw; max-height: 92vh;
        object-fit: contain; border-radius: 10px;
        display: block;
        animation: lbPop .22s ease;
    }
    @keyframes lbPop { from { transform: scale(.93); opacity:0; } to { transform: scale(1); opacity:1; } }

    .gv-lb-close {
        position: absolute; top: 18px; right: 18px; z-index: 2;
        width: 44px; height: 44px; border-radius: 50%;
        border: none; background: rgba(255,255,255,.12); color: #fff;
        font-size: 18px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background .2s, transform .2s;
    }
    .gv-lb-close:hover { background: #d32f2f; transform: rotate(90deg); }

    .gv-lb-nav {
        position: absolute; top: 50%; transform: translateY(-50%);
        z-index: 2; width: 50px; height: 50px; border-radius: 50%;
        border: none; background: rgba(255,255,255,.12); color: #fff;
        font-size: 20px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background .2s;
    }
    .gv-lb-nav:hover { background: rgba(255,255,255,.28); }
    .gv-lb-prev { left: 18px; }
    .gv-lb-next { right: 18px; }

    /* ── Responsive ── */
    @media (max-width: 992px) {
        .gv-main-card { min-height: 320px; }
        .gv-img-area  { padding: 20px 56px; }
        .gv-main-img  { max-height: 380px; }
        .gv-nav-btn   { opacity: 1; }
        .gv-info-card { position: static; }
    }
    @media (max-width: 576px) {
        .gv-img-area  { padding: 16px 48px; }
        .gv-main-img  { max-height: 280px; }
        .gv-thumb     { width: 66px; height: 52px; }
        .gv-nav-left  { left: 8px; }
        .gv-nav-right { right: 8px; }
    }