/* ==========================================================================
   Variation Gallery Carousel  –  vgc.css  v2.1.0
   ========================================================================== */

/* ── Custom properties ──────────────────────────────────────────────────── */
.vgc-wrapper {
    --vgc-gap: 16px;
    --vgc-radius: 0;
    --vgc-accent: #1a1a1a;
    --vgc-btn-size: 40px;
    --vgc-duration: 0.45s;
    --vgc-ease: cubic-bezier(.4, 0, .2, 1);

    position: relative;
    width: 100%;
    box-sizing: border-box;
    user-select: none;

    /* ── Main featured image ────────────────────────────────────────────────── */
    .vgc-main-image {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: var(--vgc-radius);
        overflow: hidden;
        /* background: #f0f0f0; */
        margin-bottom: 12px;
    }

    .vgc-main-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity .35s ease;
    }

    .vgc-main-img.is-loading {
        opacity: 0;
    }

    /* Spinner shown while the new image loads */
    .vgc-main-loader {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s;
    }

    .vgc-main-loader.is-visible {
        opacity: 1;
    }

    .vgc-main-loader::after {
        content: '';
        width: 36px;
        height: 36px;
        border: 3px solid rgba(0, 0, 0, .12);
        border-top-color: var(--vgc-accent);
        border-radius: 50%;
        animation: vgc-spin .7s linear infinite;
    }

    @keyframes vgc-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ── Carousel section label ─────────────────────────────────────────────── */
    .vgc-carousel-label {
        font-size: .75rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #999;
        margin: 0 0 8px calc(var(--vgc-btn-size) + 12px);
        display: none;
    }

    /* ── Carousel outer wrapper ─────────────────────────────────────────────── */
    .vgc-carousel-row {
        position: relative;
        padding: 0 calc(var(--vgc-btn-size) + 12px);
    }

    /* Viewport clips the scrolling track */
    .vgc-viewport {
        overflow: hidden;
        width: 100%;
    }

    /* ── Track ──────────────────────────────────────────────────────────────── */
    .vgc-track {
        display: flex;
        gap: var(--vgc-gap);
        will-change: transform;
    }

    .vgc-track.is-animating {
        transition: transform var(--vgc-duration) var(--vgc-ease);
    }

    /* ── Slides ─────────────────────────────────────────────────────────────── */
    .vgc-slide {
        flex-shrink: 0;
        box-sizing: border-box;
    }

    /* ── Card ───────────────────────────────────────────────────────────────── */
    .vgc-card {
        position: relative;
        border-radius: var(--vgc-radius);
        overflow: hidden;
        /* background: #f5f5f5; */
        aspect-ratio: 1 / 1;
        cursor: pointer;
        transition: box-shadow .25s, transform .25s, outline-offset .15s;
        outline: 2px solid transparent;
        outline-offset: 0px;
    }

    .vgc-card:hover {
        box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
        transform: translateY(-2px);
    }

    /* Active / selected state */
    .vgc-card.is-active {
        /* outline: 2px solid var(--vgc-accent); */
        /* outline-offset: 3px; */
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    }

    .vgc-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
    }

    .vgc-card:hover img {
        transform: scale(1.05);
    }

    /* ── Variation label ────────────────────────────────────────────────────── */
    .vgc-label {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        /* background: linear-gradient(transparent, rgba(0, 0, 0, .55)); */
        color: #fff;
        font-size: .7rem;
        letter-spacing: .03em;
        padding: 18px 8px 7px;
        text-align: center;
        pointer-events: none;
    }

    /* ── Prev / Next buttons ────────────────────────────────────────────────── */
    .vgc-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: var(--vgc-btn-size);
        height: var(--vgc-btn-size);
        border-radius: 50%;
        border: none;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--vgc-accent);
        transition: background .2s, box-shadow .2s, color .2s;
        z-index: 2;
        padding: 0;
    }

    .vgc-btn:hover {
        background: var(--vgc-accent);
        color: #fff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
    }

    .vgc-btn svg {
        width: 18px;
        height: 18px;
    }

    .vgc-prev {
        left: 0;
    }

    .vgc-next {
        right: 0;
    }

    /* ── Dot pagination ─────────────────────────────────────────────────────── */
    .vgc-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }

    .vgc-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: #ccc;
        cursor: pointer;
        padding: 0;
        transition: background .2s, transform .2s;
        min-height: initial;
    }

    .vgc-dot.active {
        background: var(--vgc-accent);
        transform: scale(1.35);
    }

    /* ── Empty state ────────────────────────────────────────────────────────── */
    .vgc-empty {
        color: #888;
        font-size: .9rem;
        padding: 16px 0;
    }

    /* ── Responsive ─────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
        .vgc-wrapper {
            --vgc-btn-size: 34px;
        }
    }

    @media (max-width: 480px) {
        .vgc-wrapper {
            --vgc-btn-size: 30px;
            --vgc-gap: 10px;
        }
    }
}