/* ---------- Frontend grid ---------- */
.wimg-grid { display:grid !important; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)) !important; gap: 1rem !important; }
.wimg-open { display:block; text-decoration:none; }
.wimg-thumb-wrap { position:relative; display:block; width:100%; padding-top:55%; border-radius:0 !important; overflow:hidden; background:#f6f6f6; }
.wimg-thumb-wrap img.wimg-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:0 !important; }
.wimg-thumb { border-radius:0 !important; }

/* ---------- Admin UI ---------- */
.wimg-admin .wimg-admin-controls { margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.wimg-admin .wimg-list { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:1rem; }
.wimg-row { border:1px solid #e5e5e5; border-radius:12px; padding:.75rem; background:#fff; }
.wimg-row.warn { border-color:#ea4335; }
.wimg-row-header { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; row-gap:.5rem; margin-bottom:.75rem; }
.wimg-drag-handle { cursor:grab; }
.wimg-row-body { display:grid; grid-template-columns: 220px 1fr; gap:1rem; align-items:start; }
.wimg-row .img-preview { position:relative; width:100%; min-height:120px; background:#f7f7f7; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.wimg-row .img-preview img { width:100%; height:auto; display:block; }
.wimg-row .img-preview .img-meta { position:absolute; bottom:6px; left:8px; font-size:12px; background:rgba(0,0,0,.65); color:#fff; padding:2px 6px; border-radius:6px; }
.wimg-row .img-preview .img-warning { position:absolute; top:6px; left:8px; font-size:12px; background:#ea4335; color:#fff; padding:2px 6px; border-radius:6px; font-weight:600; }
.wimg-row .product_list { list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.4rem; }
.wimg-row .prod-item { display:flex; align-items:center; gap:.5rem; }
.wimg-row .dd { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.25rem; max-height:220px; overflow:auto; border:1px dashed #ddd; padding:.25rem; border-radius:6px; }

/* Media modal: always hide already used attachments */
.media-modal .attachments .attachment.wimg-in-gallery { display:none !important; }

/* ---------- Lightbox ---------- */
.wimg-lightbox { position:fixed; inset:0; display:none; z-index: 2147483000; }
.wimg-lightbox.open { display:block; }
.wimg-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); }

/* Flexible desktop dialog (shrink-wrap to image + aside) */
.wimg-dialog { position:relative; z-index:1; margin:4vh auto; border-radius:0 !important; overflow:hidden;
  display:grid; grid-template-columns: 1fr 360px; align-items:stretch;
  background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.28); }

/* Media */
.wimg-media-wrap { position:relative; background:transparent; display:flex; align-items:center; justify-content:center; }
#wimg-lightbox-img { display:block; width:auto; height:auto; }

/* Controls */
.wimg-close, .wimg-nav { all: unset; position:absolute; display:grid; place-items:center;
  width:36px !important; height:36px !important; aspect-ratio:1/1; box-sizing:border-box !important;
  background:rgba(255,255,255,.32); color:#000; border:1px solid rgba(0,0,0,.25);
  border-radius:50% !important; cursor:pointer; font-size:20px; line-height:1;
  box-shadow:0 1px 6px rgba(0,0,0,.25); z-index:2; }
.wimg-close:hover, .wimg-close:focus, .wimg-nav:hover, .wimg-nav:focus { background:rgba(255,255,255,.54); }
.wimg-close { top:10px; right:10px; font-weight:700; }
.wimg-prev { top:50%; left:12px; transform:translateY(-50%); }
.wimg-next { top:50%; right:12px; transform:translateY(-50%); }

/* Aside */
.wimg-aside { padding:0; background:#fff; overflow:auto; }
.wimg-aside-inner { padding:1rem; }
.wimg-aside h3 { margin:0 0 .6rem 0; padding:0; }

/* Product list spacing & alignment */
.wimg-aside .product-list { margin:0 !important; padding:0 !important; list-style:none !important; display:grid; gap:.6rem; }
.wimg-aside .product-list > li { margin:0 !important; list-style:none !important; }
.wimg-aside .product-row { border:1px solid #eee; border-radius:10px; padding:.6rem !important; margin:0 !important; }
.product-link { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.product-link .thumb { width:48px; height:48px; object-fit:cover; border-radius:8px; background:#f5f5f5; }
.product-link .title { font-weight:400; color:#222; line-height:1.2; }

/* ---------- Mobile (stacked) ---------- */
@media (max-width: 768px){
  .wimg-dialog { grid-template-columns: 1fr; grid-template-rows: auto 1fr; width:100vw; height:100dvh; margin:0; overflow:auto; }
  .wimg-media-wrap { background:#000; max-height:100dvh; }
  #wimg-lightbox-img { width:auto; max-width:100%; height:auto; max-height:100dvh; }
  .wimg-aside { max-height:unset; }
  .wimg-close, .wimg-nav { width:32px !important; height:32px !important; font-size:18px; }
  .wimg-prev { left:10px; } .wimg-next { right:10px; }
}

/* ---------- Phone landscape: image-only mode ---------- */
@media (max-width: 915px) and (orientation: landscape){
  .wimg-dialog { grid-template-columns: 1fr !important; width:100vw !important; max-width:100vw !important; grid-template-rows: 1fr; }
  .wimg-aside { display:none !important; }
  .wimg-media-wrap { background:#000; max-height:100dvh; }
  #wimg-lightbox-img { max-height:100dvh; max-width:100vw; width:auto; height:auto; }
}