/* Конструктор фотогалереи — только то, чего нет у общей обвязки конструкторов
   (.vcard-editor, .vc-sec-head, .vc-themes, .sw и рамка телефона в style.css):
   зона загрузки, список снимков, переключатель раскладки и необязательные
   поля кнопки и сайта. */
.gl-fields{border:0;padding:0;margin:0;min-width:0}
.gl-fields:disabled{opacity:.65}
/* Строка над формой: слева «Заполнить примером», справа те же пять квадратов
   цвета, что у карточки и соцсетей. */
.gl-sec-head #gallerySample{margin-right:auto}
.gl-photo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px}
.gl-photo-heading label{font-size:13px;font-weight:600}
.gl-photo-heading>span{font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums}
.gl-drop{border:1px dashed var(--border);background:#F7FBFE;border-radius:12px;padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;margin-bottom:14px}
.gl-drop.dragover{border-color:var(--primary);background:var(--primary-50)}
.gl-drop svg{width:29px;height:29px;color:var(--muted2)}
.gl-drop>span{font-size:11px;color:var(--muted2)}
.gl-drop button{margin-top:3px}
/* Переключатель «вертикальные во всю ширину» — над списком, виден только когда
   среди снимков есть вертикальные (renderGalleryLayoutRow). */
.gl-layout{margin:0 0 10px}
/* Список снимков: слева от миниатюры кнопки «выше» и «ниже» одна над другой,
   потом миниатюра (вертикальный снимок стоит уже, на сером поле — так видно,
   что он вертикальный), номер и имя файла, справа — «убрать», крупнее
   остальных (расстановка — решение владельца 12.09.2026). Кнопки появляются
   при наведении и при фокусе с клавиатуры, чтобы не загромождать список; на
   экранах без наведения они видны всегда — иначе до них не добраться. */
.gl-list{display:flex;flex-direction:column}
.gl-list:empty{display:none}
.gl-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--border)}
.gl-row:first-child{border-top:none}
.gl-row-move{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.gl-row-pic{flex-shrink:0;width:84px;height:64px;border-radius:8px;overflow:hidden;background:#EDF1F5;display:flex;justify-content:center}
.gl-row-pic img{display:block;width:100%;height:100%;object-fit:cover}
.gl-row.portrait .gl-row-pic img{width:48px}
.gl-row-text{flex:1;min-width:0}
.gl-row-name{font-size:12.5px;font-weight:600;color:var(--text)}
.gl-row-sub{font-size:11px;color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.gl-row-move,.gl-row-del{opacity:0;transition:opacity .15s}
.gl-row:hover .gl-row-move,.gl-row:hover .gl-row-del,.gl-row:focus-within .gl-row-move,.gl-row:focus-within .gl-row-del{opacity:1}
@media(hover:none){.gl-row-move,.gl-row-del{opacity:1}}
.gl-row button{padding:0;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
/* Две стрелки столбиком ровно в высоту миниатюры (30 + 4 + 30 = 64). */
.gl-row-move button{width:30px;height:30px}
.gl-row-move button svg{width:16px;height:16px}
.gl-row button:hover{border-color:var(--primary);color:var(--primary)}
.gl-row button:disabled{opacity:.35;cursor:default}
.gl-row button:disabled:hover{border-color:var(--border);color:var(--muted)}
.gl-row-del{width:36px;height:36px;flex-shrink:0}
.gl-row-del svg{width:17px;height:17px}
.gl-row .gl-row-del:hover{border-color:#FECACA;background:#FEF2F2;color:var(--red)}
.gl-status{font-size:11px;line-height:1.5;color:var(--muted2);margin:8px 0 0;min-height:17px}
.gl-status:empty{margin:0;min-height:0}
/* Кнопка и сайт — обычные поля ниже фотографий с пометкой «необязательно»,
   как у карточки: раскрывашек в конструкторах сайта больше нигде нет. */
.gl-optional{margin-top:22px;border-top:1px solid var(--border);padding-top:18px}
.gl-optional-title{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:12px}
.gl-fields button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Телефон у галереи поднят меньше, чем у карточки (общие −54px в
   .vcard-preview-col): над полями галереи нет подвкладок, и с общим подъёмом
   корпус упирался в верхний край карточки (просьба владельца 12.09.2026).
   Только в две колонки — в одну колонку общий @media ставит телефон под
   форму без подъёма, и трогать это незачем. */
@media(min-width:1181px){.gl-editor .vcard-preview-col{margin-top:-30px}}
@media(max-width:560px){
  .gl-row{gap:8px}
  .gl-row-pic{width:72px;height:56px}
  .gl-row.portrait .gl-row-pic img{width:42px}
  .gl-row-move button{width:26px;height:26px}
  .gl-row-move button svg{width:14px;height:14px}
  .gl-row-del{width:32px;height:32px}
}