@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: 'Inter', sans-serif !important;
}

.img-card { position: relative; overflow: hidden; border-radius: .5rem; }
.img-thumb {
  display: block;          /* remove o espacinho do inline */
  width: 100%;             /* ocupa toda a coluna */
  height: auto;            /* mantém proporção natural */
  aspect-ratio: 1 / 1;     /* deixa todas com mesmo formato (quadrado) */
  object-fit: cover;       /* recorta sem distorcer */
  border-radius: .5rem;
}
.drag-handle { cursor: move; position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.6); color:#fff; padding: .25rem .5rem; border-radius: .4rem; font-size: .75rem; }
.btn-excluir { position: absolute; top: .5rem; right: .5rem; }
.is-dragging 
{ 
    opacity: .4; 
     pointer-events: none;   
}
.drop-target { outline: 2px dashed #0d6efd; outline-offset: 2px; border-radius: .5rem; }

/* badge e corpo do card sem sobreposição à imagem */
.badge-ordem { position: static; }
.img-card .card-body { display:flex; justify-content: space-between; align-items: center; }
@media (max-width: 576px) {
    .var-actions .btn { width: 100%; }
}
/* Badge acima e centralizada no MOBILE */
@media (max-width:576px)
{
    .row.g-3.align-items-center .col-md-2.d-flex.align-items-center{
        flex-direction: column;           /* empilha badge e imagem */
        align-items: center !important;   /* centraliza */
        justify-content: flex-start;
        text-align: center;
    }
    .row.g-3.align-items-center .col-md-2.d-flex.align-items-center .badge{
        display: inline-block;
        margin-bottom: .5rem;             /* espacinho acima da imagem */
    }
    .row.g-3.align-items-center .col-md-2.d-flex.align-items-center img{
        display: block;
        margin: 0 auto;                   /* garante imagem centralizada */
    }
}

.cat-wrap{display:flex;flex-wrap:wrap;gap:.5rem;border:1px solid #e9ecef;border-radius:.75rem;padding:.5rem;background:#fff}
.cat-chips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.cat-chip{display:inline-flex;align-items:center;gap:.35rem;background:#f8f9fa;border:1px solid #e9ecef;border-radius:1.25rem;padding:.25rem .6rem;font-size:.92rem}
.cat-chip .rm{border:0;background:transparent;font-weight:700;line-height:1;cursor:pointer;padding:0 .1rem}
.cat-input{border:0;outline:0;min-width:220px;flex:1 1 220px;padding:.25rem}
.cat-sug{position:relative;width:100%}
.cat-sug ul{position:absolute;z-index:1000;margin-top:.25rem;list-style:none;background:#fff;border:1px solid #e9ecef;border-radius:.5rem;padding:.25rem;max-height:260px;overflow:auto;width:min(560px,100%);box-shadow:0 6px 22px rgba(0,0,0,.08)}
.cat-sug li{padding:.45rem .6rem;border-radius:.35rem;cursor:pointer}
.cat-sug li:hover,.cat-sug li.active{background:#f1f3f5}
@media (max-width:576px){.cat-input{min-width:140px}}