/* Плитки фотографий: и уже загруженные, и только что выбранные.
 *
 * Один набор на подачу и на правку. Раньше это были два разных куска стилей в
 * двух файлах, они разъезжались, а на странице правки их вдобавок перебивало
 * общее правило .edit-product-form button — кнопки становились синими
 * прямоугольниками в 46 пикселей поверх фотографии.
 *
 * Кнопки вынесены полосой ПОД снимок: поверх фото они закрывают товар, а
 * пальцем на телефоне попасть в наложенный кружок в 24 пикселя тяжело.
 * Каждая кнопка со своей заливкой — иконка без фона на пёстром снимке
 * теряется, из-за чего их и «не было видно».
 */

.vm-tiles{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:0 0 18px;
    padding:0;
    list-style:none;
}

.vm-tile{
    box-sizing:border-box;
    width:116px;
    flex:0 0 auto;
    border:1px solid var(--vm-line,#e2e8f0);
    border-radius:12px;
    overflow:hidden;
    background:var(--vm-surface,#fff);
    cursor:grab;
    /* Подпись формы центрирована, и без этого иконки уезжали к середине. */
    text-align:left;
}
.vm-tile.is-main{
    border-color:var(--vm-green,#10b981);
    box-shadow:0 0 0 1px var(--vm-green,#10b981);
}
.vm-tile.dragging{opacity:.55;transform:scale(.97)}
.vm-tile.drop-target{outline:2px dashed rgba(59,130,246,.85)}
.vm-tile.swap-target{outline:2px solid rgba(59,130,246,.95)}

.vm-tile__pic{
    position:relative;
    display:block;
    width:100%;
    height:116px;
    background:#f1f3f7;
}
.vm-tile__pic img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.vm-tile__badge{
    position:absolute;
    left:6px;
    top:6px;
    padding:3px 8px;
    border-radius:999px;
    background:var(--vm-green,#10b981);
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.01em;
    box-shadow:0 1px 3px rgba(15,23,42,.25);
}

.vm-tile__bar{
    display:flex;
    align-items:stretch;
    gap:1px;
    background:var(--vm-line,#e2e8f0);
    border-top:1px solid var(--vm-line,#e2e8f0);
}

/* Селектор с родителем — чтобы общее правило вида «.edit-product-form button»
 * не перекрашивало эти кнопки: у него вес ниже. */
.vm-tile .vm-tile__btn{
    flex:1 1 0;
    min-width:0;
    box-sizing:border-box;
    height:34px;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
    background:#f8fafc;
    color:#475569;
}
.vm-tile .vm-tile__btn i{font-size:14px;line-height:1}
.vm-tile .vm-tile__btn:hover{background:#eef2f7;color:#0f172a}
.vm-tile .vm-tile__btn:focus-visible{outline:2px solid var(--vm-brand,#ff6600);outline-offset:-2px}
.vm-tile .vm-tile__btn:disabled{opacity:.45;cursor:default}

.vm-tile .vm-tile__btn--rotate{background:#eff6ff;color:#2563eb}
.vm-tile .vm-tile__btn--rotate:hover{background:#dbeafe;color:#1d4ed8}

.vm-tile .vm-tile__btn--main{background:#ecfdf5;color:#059669}
.vm-tile .vm-tile__btn--main:hover{background:#d1fae5;color:#047857}

.vm-tile .vm-tile__btn--del{background:#fef2f2;color:#dc2626}
.vm-tile .vm-tile__btn--del:hover{background:#fee2e2;color:#b91c1c}

/* Уже главная: место кнопки занимает неактивный знак, чтобы полоса не прыгала
 * по ширине, когда главной становится другая фотография. */
.vm-tile .vm-tile__btn--main[aria-pressed="true"]{
    background:var(--vm-green,#10b981);
    color:#fff;
    cursor:default;
}
.vm-tile .vm-tile__btn--main[aria-pressed="true"]:hover{
    background:var(--vm-green,#10b981);
    color:#fff;
}

@media (max-width:600px){
    .vm-tiles{gap:10px}
    .vm-tile{width:calc(50% - 5px)}
    .vm-tile__pic{height:132px}
    .vm-tile .vm-tile__btn{height:40px;font-size:15px}
    .vm-tile .vm-tile__btn i{font-size:15px}
}