/* Product gallery uploader (ProductUploadRules::galleryField) — vendor
   panel product form. Pairs with public/js/product-gallery.js. */

.gh-gallery .filepond--drop-label {
    min-height: 6rem;
}

.gh-gallery .filepond--drop-label label {
    font-weight: 500;
}

/* Cover badge on the first photo. */
.gh-gallery .filepond--item.gh-gallery-cover::before {
    content: 'Cover';
    position: absolute;
    /* Bottom, where "Make cover" sits on the others — the top row is
       FilePond's file name / "Upload complete" status. */
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
    pointer-events: none;
}

.gh-gallery .filepond--item.gh-gallery-cover .filepond--panel-center,
.gh-gallery .filepond--item.gh-gallery-cover .filepond--panel-top,
.gh-gallery .filepond--item.gh-gallery-cover .filepond--panel-bottom {
    box-shadow: inset 0 0 0 3px #16a34a;
}

.gh-gallery .gh-gallery-make-cover {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    padding: 0.3rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.92);
    color: #111827;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

.gh-gallery .gh-gallery-make-cover:hover,
.gh-gallery .gh-gallery-make-cover:focus-visible {
    background: #16a34a;
    color: #fff;
    outline: none;
}

/* Grid items reorder by drag — show it. */
.gh-gallery .filepond--item[data-filepond-item-state='idle'] {
    cursor: grab;
}

/* Phones: two photos per row so the buttons stay tappable. */
@media (max-width: 640px) {
    .gh-gallery .filepond--item {
        width: calc(50% - 0.5em) !important;
    }
}