.ig-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; padding:24px; justify-content:start; }
  .ig-card { background:#fff; border:1px solid #d0d0d0; padding:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); border-radius:4px; position:relative; }
  /* Відновлена HEIC-позиція використовує вже готовий квадрат 1080×1080 з
     запеченою білою рамкою. Не додаємо рамку й редактор вдруге. */
  .ig-card.ig-baked .ig-frame { padding:0; }
  .ig-card.ig-baked .ig-photo-wrap { cursor:default; }
  .ig-card.ig-baked .ig-photo-wrap img { width:100%; height:100%; object-fit:contain; position:static; transform:none !important; }
  .ig-card.ig-baked .ig-rot-btn,
  .ig-card.ig-baked .ig-zoom-stack { display:none; }
  .ig-frame { background:#fff; padding:9px; position:relative; border-radius:2px; border:1px solid #999; box-sizing:border-box; }
  .ig-delete-btn {
    position:absolute; top:-12px; right:-12px; width:26px; height:26px; background:rgba(255,68,68,.92);
    border:2px solid #fff; cursor:pointer; z-index:30; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px; font-weight:400; border-radius:50%; transition:all .2s;
    box-shadow:0 2px 6px rgba(0,0,0,.3); opacity:0; pointer-events:none; line-height:1;
  }
  .ig-card:hover .ig-delete-btn { opacity:1; pointer-events:auto; }
  .ig-delete-btn:hover { background:rgba(200,30,30,1); transform:scale(1.12); }
  /* На touch-пристроях :hover "залипає" назавжди після першого тапу (немає
     mouseleave) — тому кнопки видалення/рамки лишались видимими постійно.
     Вимикаємо hover-реакцію на touch і показуємо лише через явний клас
     .active, що ставиться по тапу (onCardTouch), як у референсі. */
  @media (hover:none) {
    .pol-card:hover .pol-delete-btn, .pol-card:hover .pol-btn-frame,
    .ix-card:hover .ix-delete-btn, .ix-card:hover .pol-btn-frame,
    .ig-card:hover .ig-delete-btn { opacity:0; pointer-events:none; }
    .pol-card.active .pol-delete-btn, .pol-card.active .pol-btn-frame,
    .ix-card.active .ix-delete-btn, .ix-card.active .pol-btn-frame,
    .ig-card.active .ig-delete-btn { opacity:1; pointer-events:auto; }
  }
  .ig-photo-wrap { width:100%; aspect-ratio:1; background:#f5f5f5; overflow:hidden; position:relative; cursor:grab; }
  .ig-photo-wrap.dragging { cursor:grabbing; }
  .ig-photo-wrap img { position:absolute; top:50%; left:50%; user-select:none; -webkit-user-drag:none; touch-action:none; z-index:1; }
  .ig-photo-wrap img.landscape { height:100%; width:auto; max-width:none; }
  .ig-photo-wrap img.portrait  { width:100%; height:auto; max-height:none; }
  .ig-rot-btn {
    position:absolute; top:0; width:44px; height:44px; background:rgba(50,50,50,.82); border:none;
    cursor:pointer; z-index:20; display:flex; align-items:center; justify-content:center; color:#fff;
    font-size:18px; transition:background .14s;
  }
  .ig-rot-btn:hover { background:rgba(10,10,10,.95); }
  .ig-rot-left  { left:0;  border-radius:0 0 100% 0; }
  .ig-rot-right { right:0; border-radius:0 0 0 100%; }
  .ig-rot-left  .ig-rot-icon { margin-bottom:10px; margin-right:10px; }
  .ig-rot-right .ig-rot-icon { margin-bottom:10px; margin-left:10px; }
  .ig-zoom-stack { position:absolute; right:8px; bottom:8px; display:flex; flex-direction:column; gap:3px; z-index:25; }
  .ig-zoom-stack button {
    width:24px; height:24px; background:rgba(20,20,20,.75); color:#fff; border:none; border-radius:5px;
    font-size:15px; font-weight:300; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .12s; box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .ig-zoom-stack button:hover { background:rgba(10,10,10,.9); }
  .ig-footer { display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:8px; }
  .ig-qty-controls { display:flex; align-items:center; gap:6px; }
  .ig-qty-btn { width:28px; height:28px; border:1px solid #ddd; background:#fff; cursor:pointer; transition:all .2s; border-radius:4px; font-size:16px; font-weight:bold; color:#333; }
  .ig-qty-btn:hover { background:#f5f5f5; border-color:#00a8cc; color:#00a8cc; }
  .ig-qty-input { width:50px; height:28px; text-align:center; border:1px solid #ddd; font-size:14px; font-weight:600; border-radius:4px; }
  .ig-qty-label { font-size:13px; color:#999; }
  .ig-price { font-size:18px; font-weight:700; color:#00a8cc; }

/* DF_MAGNET_UPLOAD_INSTAGRAM_V1 */
.dfmo-slots.ig-grid{grid-template-columns:repeat(3,240px)!important;gap:20px!important;padding:24px 0!important;justify-content:center!important;}
.dfmo-slot.ig-card{aspect-ratio:auto!important;min-height:0!important;overflow:visible!important;padding:10px!important;background:#fff!important;border:1px solid #d0d0d0!important;}
.dfmo-slot.ig-card .ig-frame{padding:9px!important;}
.dfmo-slot.ig-card .ig-photo-wrap{aspect-ratio:1/1!important;}
.dfmo-slot.ig-card .dfmo-preview{display:none!important;position:absolute!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;inset:auto!important;max-width:none!important;max-height:none!important;object-fit:initial!important;transform-origin:center center!important;border-radius:0!important;pointer-events:none!important;}
.dfmo-slot.ig-card.has-photo .dfmo-preview{display:block!important;}
.dfmo-slot.ig-card .ig-photo-wrap .dfmo-preview.landscape{height:100%!important;width:auto!important;}
.dfmo-slot.ig-card .ig-photo-wrap .dfmo-preview.portrait{width:100%!important;height:auto!important;}
.dfmo-slot.ig-card .dfmo-slot-empty{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border:1px dashed #cbd5e1!important;border-radius:0!important;background:#f7f9fc!important;z-index:2!important;}
.dfmo-slot.ig-card.has-photo .dfmo-slot-empty{display:none!important;}
.dfmo-slot.ig-card .ig-delete-btn,.dfmo-slot.ig-card .ig-rot-btn,.dfmo-slot.ig-card .ig-zoom-stack{display:none!important;}
.dfmo-slot.ig-card.has-photo .ig-rot-btn{display:flex!important;}
.dfmo-slot.ig-card.has-photo .ig-zoom-stack{display:flex!important;}
.dfmo-slot.ig-card.has-photo .ig-delete-btn{display:flex!important;opacity:1!important;pointer-events:auto!important;}
.dfmo-ig-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;margin-top:5px;font-size:13px;color:#999;}
.dfmo-ig-replace{position:static!important;display:inline-flex!important;transform:none!important;inset:auto!important;margin:0!important;border-radius:4px!important;}
@media(max-width:850px){.dfmo-slots.ig-grid{grid-template-columns:repeat(2,240px)!important;}}
@media(max-width:560px){.dfmo-slots.ig-grid{grid-template-columns:minmax(0,240px)!important;}}

/* DF_MAGNET_EXACT_CARD_V1 */
.dfmo-slots.ig-grid{
display:grid!important;
grid-template-columns:repeat(3,240px)!important;
gap:20px!important;
justify-content:center!important;
align-items:start!important;
padding:24px 0!important;
}
.dfmo-slot.ig-card{
display:block!important;
position:relative!important;
width:240px!important;
height:auto!important;
min-height:0!important;
aspect-ratio:auto!important;
padding:10px!important;
margin:0!important;
overflow:visible!important;
background:#fff!important;
border:1px solid #d0d0d0!important;
border-radius:4px!important;
box-shadow:0 2px 8px rgba(0,0,0,.08)!important;
box-sizing:border-box!important;
}
.dfmo-slot.ig-card input[type=file]{display:none!important;}
.dfmo-slot.ig-card .ig-frame{
display:block!important;
position:relative!important;
width:100%!important;
height:auto!important;
padding:9px!important;
background:#fff!important;
border:1px solid #999!important;
border-radius:2px!important;
box-sizing:border-box!important;
}
.dfmo-slot.ig-card .ig-photo-wrap{
display:block!important;
position:relative!important;
width:100%!important;
height:auto!important;
aspect-ratio:1/1!important;
overflow:hidden!important;
background:#f5f5f5!important;
cursor:grab!important;
}
.dfmo-slot.ig-card .ig-photo-wrap.dragging{cursor:grabbing!important;}
.dfmo-slot.ig-card .dfmo-slot-empty{
display:flex!important;
position:absolute!important;
inset:0!important;
width:auto!important;
height:auto!important;
align-items:center!important;
justify-content:center!important;
box-sizing:border-box!important;
margin:0!important;
border:1px dashed #cbd5e1!important;
background:#f7f9fc!important;
border-radius:0!important;
z-index:5!important;
}
.dfmo-slot.ig-card.has-photo .dfmo-slot-empty{display:none!important;}
.dfmo-slot.ig-card .ig-photo-wrap .dfmo-preview{
display:none!important;
position:absolute!important;
top:50%!important;
left:50%!important;
right:auto!important;
bottom:auto!important;
inset:auto!important;
max-width:none!important;
max-height:none!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
object-fit:unset!important;
pointer-events:none!important;
transform-origin:center center!important;
}
.dfmo-slot.ig-card.has-photo .dfmo-preview{display:block!important;}
.dfmo-slot.ig-card .dfmo-preview.landscape{height:100%!important;width:auto!important;}
.dfmo-slot.ig-card .dfmo-preview.portrait{width:100%!important;height:auto!important;}
.dfmo-slot.ig-card .ig-delete-btn{
position:absolute!important;
top:-12px!important;
right:-12px!important;
width:26px!important;
height:26px!important;
border:2px solid #fff!important;
border-radius:50%!important;
background:rgba(255,68,68,.92)!important;
color:#fff!important;
z-index:30!important;
align-items:center!important;
justify-content:center!important;
font-size:18px!important;
line-height:1!important;
}
.dfmo-slot.ig-card:not(.has-photo) .ig-delete-btn{display:none!important;}
.dfmo-slot.ig-card.has-photo .ig-delete-btn{display:flex!important;opacity:1!important;pointer-events:auto!important;}
.dfmo-slot.ig-card .ig-rot-btn{
position:absolute!important;
top:0!important;
width:44px!important;
height:44px!important;
border:0!important;
background:rgba(50,50,50,.82)!important;
color:#fff!important;
z-index:20!important;
align-items:center!important;
justify-content:center!important;
}
.dfmo-slot.ig-card .ig-rot-left{left:0!important;border-radius:0 0 100% 0!important;}
.dfmo-slot.ig-card .ig-rot-right{right:0!important;border-radius:0 0 0 100%!important;}
.dfmo-slot.ig-card:not(.has-photo) .ig-rot-btn{display:none!important;}
.dfmo-slot.ig-card.has-photo .ig-rot-btn{display:flex!important;}
.dfmo-slot.ig-card .ig-zoom-stack{
position:absolute!important;
right:8px!important;
bottom:8px!important;
display:none!important;
flex-direction:column!important;
gap:3px!important;
z-index:25!important;
}
.dfmo-slot.ig-card.has-photo .ig-zoom-stack{display:flex!important;}
.dfmo-slot.ig-card .ig-zoom-stack button{
width:24px!important;
height:24px!important;
border:0!important;
border-radius:5px!important;
background:rgba(20,20,20,.75)!important;
color:#fff!important;
font-size:15px!important;
padding:0!important;
}
.dfmo-ig-footer{display:none!important;}
.dfmo-slot .dfmo-replace{display:none!important;}
@media(max-width:820px){.dfmo-slots.ig-grid{grid-template-columns:repeat(2,240px)!important;}}
@media(max-width:540px){.dfmo-slots.ig-grid{grid-template-columns:240px!important;}}

/* DF_MAGNET_CARD_SIZE_V2 */
.dfmo-slots.ig-grid{grid-template-columns:repeat(3,280px)!important;gap:22px!important;}
.dfmo-slot.ig-card{width:280px!important;}
@media(max-width:960px){.dfmo-slots.ig-grid{grid-template-columns:repeat(2,280px)!important;}}
@media(max-width:620px){.dfmo-slots.ig-grid{grid-template-columns:minmax(0,280px)!important;}}
.dfmo-slot.ig-card .ig-photo-wrap{touch-action:none!important;user-select:none!important;}
.dfmo-slot.ig-card .ig-photo-wrap img{pointer-events:none!important;user-select:none!important;-webkit-user-drag:none!important;}

/* DF_MAGNET_REMOVE_OUTER_FRAME_V1 */
.dfmo-slot.ig-card{
  border:0!important;
  box-shadow:none!important;
}

/* DF_MAGNET_MOBILE_SCROLL_V1 */
@media(max-width:620px){
  .dfmo-slot.ig-card .ig-photo-wrap{
    touch-action:pan-y!important;
  }
}

/* =========================================================
   DF INSTAGRAM MAGNET COMPACT 2026-09-02
   Scope: Instagram magnet editor only
   ========================================================= */

#dfInstagramEditor .dfmo-slots.ig-grid{
  display:grid!important;
  grid-template-columns:repeat(3,220px)!important;
  gap:14px!important;
  justify-content:center!important;
  align-items:start!important;
  padding:12px 0 10px!important;
}

#dfInstagramEditor .dfmo-slot.ig-card{
  width:220px!important;
  min-width:0!important;
  height:auto!important;
  padding:8px!important;
  margin:0!important;
  box-sizing:border-box!important;
}

#dfInstagramEditor .dfmo-slot.ig-card .ig-frame{
  padding:7px!important;
}

#dfInstagramEditor .dfmo-slot.ig-card .ig-photo-wrap{
  width:100%!important;
  aspect-ratio:1/1!important;
}

#dfInstagramEditor .dfmo-slot-empty b{
  width:36px!important;
  height:36px!important;
  font-size:22px!important;
}

#dfInstagramEditor .dfmo-slot-empty em{
  margin-top:8px!important;
  font-size:14px!important;
}

#dfInstagramEditor .dfmo-slot-empty small{
  margin-top:3px!important;
  font-size:12px!important;
}

#dfInstagramEditor .dfmo-status{
  margin-top:10px!important;
}

@media(max-width:760px){
  #dfInstagramEditor .dfmo-slots.ig-grid{
    grid-template-columns:repeat(2,220px)!important;
    gap:12px!important;
  }
}

@media(max-width:500px){
  #dfInstagramEditor .dfmo-slots.ig-grid{
    grid-template-columns:minmax(0,220px)!important;
    gap:12px!important;
  }

  #dfInstagramEditor .dfmo-slot.ig-card{
    width:220px!important;
  }
}