.spo-image-catalog,
.spo-image-gallery {
    --catalog-line: #c9d9d4;
    --catalog-soft: #eef5f2;
    --catalog-ink: #244b42;
}

.spo-image-add,
.spo-image-gallery {
    margin: 1rem 0;
    padding: clamp(.7rem, 2vw, 1.2rem);
    border: 1px solid var(--catalog-line);
    border-radius: 12px;
    background: var(--catalog-soft);
}

.spo-image-add > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--catalog-ink);
}

.spo-image-add > form { margin-top: 1rem; }
.spo-image-catalog [hidden],
.spo-image-gallery[hidden],
.spo-new-block > [hidden] { display: none !important; }

.spo-image-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .7rem;
    margin: .4rem 0 .8rem;
}

.spo-image-catalog label,
.spo-image-gallery label {
    display: grid;
    align-content: start;
    gap: .28rem;
    min-width: 0;
    margin: 0;
    font: inherit;
    font-size: .9em;
    font-weight: 650;
    text-transform: none;
}

.spo-image-catalog input:not([type=checkbox]),
.spo-image-catalog select,
.spo-image-catalog textarea,
.spo-image-gallery input,
.spo-image-gallery select {
    width: 100%;
    min-width: 0;
    padding: .42rem .6rem;
    border: 1px solid var(--catalog-line);
    border-radius: 7px;
    background: #fff;
    color: #233f3a;
    font: inherit;
}

.spo-image-catalog fieldset {
    border: 1px solid var(--catalog-line);
    border-radius: 8px;
    padding: .75rem;
    margin: .7rem 0;
}

.spo-image-catalog .spo-image-check { display: flex; align-items: center; }

.spo-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .75rem;
}

.spo-image-card {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .28rem;
    padding: .75rem;
    min-width: 0;
    border: 1px solid var(--catalog-line);
    border-radius: 9px;
    background: #fff;
}

.spo-image-card img {
    width: 100%;
    height: 10rem;
    object-fit: contain;
    background: #f3f6f4;
}

.spo-image-card p { margin: 0 0 .5rem; font-size: .88em; overflow-wrap: anywhere; }
.spo-image-card small { color: var(--catalog-ink); }
.spo-image-card > :last-child { margin-top: auto; }

.spo-image-upload-preview { margin: 1rem 0; }
.spo-image-upload-preview img { display: block; max-width: 100%; max-height: 24rem; object-fit: contain; }
.spo-image-upload-preview figcaption { white-space: pre-line; margin: .45rem 0; }

.spo-image-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.spo-image-tabs a,
.spo-image-gallery button,
.spo-image-catalog button {
    border-radius: 7px;
    padding: .36rem .64rem;
    font: inherit;
    font-size: .88em;
    font-style: normal;
}
.spo-image-tabs a { background: var(--catalog-soft); border: 1px solid var(--catalog-line); }
.spo-image-tabs a[aria-current] { background: var(--catalog-ink); color: #fff; }
.spo-image-catalog [data-choices], .spo-image-catalog [data-selection] { display: flex; gap: .35rem; flex-wrap: wrap; }
.spo-image-catalog [data-selection]:empty, .spo-image-gallery [data-results-status]:empty { display: none; }