/* The native Semplice grid remains the source. SPGS only changes its layout. */
.spgs-enhanced {
    box-sizing: border-box !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: var(--spgs-outer-gap, 36px) !important;
    padding-left: var(--spgs-outer-gap, 36px) !important;
}

.spgs-enhanced.spgs-variation-regular .spgs-layout,
.spgs-enhanced.spgs-variation-structured .spgs-layout {
    grid-template-columns: repeat(var(--spgs-columns, 4), minmax(0, 1fr)) !important;
}

.spgs-enhanced.spgs-variation-compact .spgs-layout {
    grid-template-columns: repeat(var(--spgs-track-count, 8), minmax(0, 1fr)) !important;
}

.spgs-enhanced.spgs-variation-regular .spgs-layout > .spgs-item {
    grid-column: span 1 !important;
    margin-top: 0 !important;
}

.spgs-enhanced.spgs-variation-structured .spgs-layout > .spgs-item {
    grid-column: span var(--spgs-span, 1) !important;
    margin-top: 0 !important;
}

.spgs-enhanced.spgs-variation-regular .spgs-layout > .spgs-item .thumb-inner,
.spgs-enhanced.spgs-variation-structured .spgs-layout > .spgs-item .thumb-inner {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.spgs-enhanced.spgs-variation-regular .spgs-layout > .spgs-item .thumb-inner > img,
.spgs-enhanced.spgs-variation-structured .spgs-layout > .spgs-item .thumb-inner > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.spgs-enhanced.spgs-variation-structured .spgs-layout > .spgs-item.spgs-featured-item .thumb-inner {
    aspect-ratio: 8 / 3;
}

.spgs-enhanced .spgs-layout {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: row dense !important;
    column-gap: var(--spgs-horizontal-gap, 28px) !important;
    row-gap: var(--spgs-vertical-gap, 72px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

/* Semplice inserts these sizing helpers as children of its Masonry container. */
.spgs-enhanced .spgs-layout > .masonry-item-width,
.spgs-enhanced .spgs-layout > .masonry-gutter,
.spgs-enhanced .spgs-layout > .grid-sizer,
.spgs-enhanced .spgs-layout > .gutter-sizer {
    display: none !important;
}

.spgs-enhanced .spgs-layout > .spgs-item {
    grid-column: span var(--spgs-span, 6) !important;
    align-self: start !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: var(--spgs-offset, 0px) 0 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: opacity 260ms ease !important;
}

.spgs-enhanced .spgs-layout > .spgs-item[aria-hidden="true"],
.spgs-enhanced .spgs-layout > .spgs-item.isotope-hidden,
.spgs-enhanced .spgs-layout > .spgs-item.filter-hidden {
    display: none !important;
}

.spgs-enhanced .spgs-layout > .spgs-item.spgs-filtered-out {
    display: none !important;
}

.spgs-enhanced .spgs-layout > .spgs-item .thumb-inner,
.spgs-enhanced .spgs-layout > .spgs-item .thumb-inner > a {
    width: 100% !important;
}

.spgs-enhanced .spgs-layout > .spgs-item .thumb-inner > img {
    display: block;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .spgs-enhanced {
        padding-right: min(var(--spgs-outer-gap, 36px), 28px) !important;
        padding-left: min(var(--spgs-outer-gap, 36px), 28px) !important;
    }

    .spgs-enhanced .spgs-layout {
        column-gap: min(var(--spgs-horizontal-gap, 28px), 24px) !important;
        row-gap: min(var(--spgs-vertical-gap, 72px), 64px) !important;
    }

    .spgs-enhanced.spgs-variation-regular .spgs-layout,
    .spgs-enhanced.spgs-variation-structured .spgs-layout,
    .spgs-enhanced.spgs-variation-compact .spgs-layout {
        grid-template-columns: repeat(var(--spgs-tablet-columns, 2), minmax(0, 1fr)) !important;
    }

    .spgs-enhanced .spgs-layout > .spgs-item {
        grid-column: span var(--spgs-tablet-span, 6) !important;
        margin-top: var(--spgs-tablet-offset, 0px) !important;
    }

    .spgs-enhanced.spgs-variation-regular .spgs-layout > .spgs-item,
    .spgs-enhanced.spgs-variation-structured .spgs-layout > .spgs-item,
    .spgs-enhanced.spgs-variation-compact .spgs-layout > .spgs-item {
        grid-column: span 1 !important;
        margin-top: 0 !important;
    }

    .spgs-enhanced.spgs-variation-structured .spgs-layout > .spgs-item.spgs-featured-item {
        grid-column: span var(--spgs-tablet-feature-span, 2) !important;
    }
}

@media (max-width: 767px) {
    .spgs-enhanced {
        padding-right: min(var(--spgs-outer-gap, 36px), 18px) !important;
        padding-left: min(var(--spgs-outer-gap, 36px), 18px) !important;
    }

    .spgs-enhanced .spgs-layout {
        display: block !important;
    }

    .spgs-enhanced .spgs-layout > .spgs-item {
        width: 100% !important;
        margin: 0 0 min(var(--spgs-vertical-gap, 72px), 44px) !important;
    }

    .spgs-enhanced .spgs-layout > .spgs-item:last-child {
        margin-bottom: 0 !important;
    }

    .spgs-enhanced .spgs-layout > .spgs-item .thumb-inner > img {
        height: auto !important;
    }
}

/* Filter motion uses individual translate/scale, keeping native transforms intact. */
.spgs-enhanced .spgs-layout > .spgs-filter-managed {
    transition: none !important;
    transform-origin: top left;
    visibility: visible !important;
}
.spgs-enhanced .spgs-layout > .spgs-filter-managed:not([aria-hidden="true"]) {
    display: block !important;
}
.spgs-enhanced .spgs-layout > [data-spgs-ghost] {
    display: block !important;
    position: absolute !important;
    left: var(--spgs-ghost-x) !important;
    top: var(--spgs-ghost-y) !important;
    width: var(--spgs-ghost-width) !important;
    margin: 0 !important;
    transition: none !important;
    pointer-events: none !important;
    visibility: visible !important;
}