.product-gallery-dialog { box-sizing:border-box; width:min(980px,calc(100vw - 32px)); max-height:90vh; border:1px solid #e2e5e8; border-radius:16px; padding:0; background:#fff; color:#27323c; box-shadow:0 20px 80px #17202a2b; }
.product-gallery-dialog::backdrop { background:#17202a66; }
.product-gallery-dialog header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:20px 24px; border-bottom:1px solid #e6e9ec; }
.product-gallery-dialog h2 { margin:0 0 6px; font-size:20px; }
.product-gallery-dialog header p { margin:0; color:#63707b; font-size:13px; }
.product-gallery-dialog button { font:inherit; cursor:pointer; border:1px solid #d9e0e6; border-radius:8px; padding:8px 12px; background:#f7f9fa; color:#27323c; }
.product-gallery-dialog header button { font-size:22px; padding:0 9px; }
.product-gallery-content { padding:24px; }
.product-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.product-gallery-grid figure { margin:0; }
.product-gallery-grid img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px; background:#f5f2ed; }
.product-gallery-grid figcaption { padding-top:9px; font-size:14px; font-weight:600; }
.product-gallery-mini { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.product-editor-gallery { grid-column:1 / -1; min-width:0; margin-top:12px; padding-top:4px; border-top:1px solid #e6e9ec; }
.product-editor-gallery .product-gallery-mini { max-height:176px; overflow-y:auto; align-content:start; }
.product-editor-gallery .product-pending-images { max-height:216px; overflow-y:auto; }
.product-gallery-mini img { width:58px; height:58px; object-fit:contain; border-radius:6px; }
.product-gallery-mini figure { margin:0; min-width:0; width:58px; }
.product-gallery-mini figcaption { margin-top:4px; color:#63707b; font:500 11px/1.4 system-ui; text-align:center; overflow-wrap:anywhere; }
.product-gallery-editor-count { margin:12px 0 0; color:#63707b; font:600 12px/1.5 system-ui; }
.product-gallery-editor-hint { margin:12px 0 0; color:#63707b; font:400 12px/1.6 system-ui; overflow-wrap:anywhere; }
.product-pending-images { margin-top:12px; display:grid; gap:8px; }
.product-pending-images > p { margin:0; font:600 12px/1.5 system-ui; color:#205882; }
.product-pending-image { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px; border:1px solid #dce6f0; border-radius:9px; background:#f5f9ff; }
.product-pending-image img { width:42px; height:42px; object-fit:contain; border-radius:6px; }
.product-pending-image span { min-width:0; font:500 12px/1.5 system-ui; overflow-wrap:anywhere; }
.product-pending-image button { padding:4px 6px; min-height:28px; border:0; border-radius:6px; background:#fff; color:#205882; font:500 12px/1.4 system-ui; cursor:pointer; }
.product-gallery-preview { max-height:45vh; overflow:auto; margin:20px 0; }
.product-gallery-preview > div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid #e8ecf0; font-size:13px; }
.product-gallery-preview span { color:#63707b; }
.product-gallery-dialog footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; }
.product-gallery-dialog .product-gallery-save { background:#205882; color:#fff; }
.product-photo-editor { width:min(880px,calc(100vw - 24px)); max-height:92dvh; overflow:hidden; }
.product-photo-editor[open] { display:flex; flex-direction:column; }
.product-photo-editor header,.product-photo-editor footer { flex-shrink:0; }
.product-photo-editor .photo-editor-body { padding:20px 24px; overflow:auto; min-height:0; }
.photo-editor-scope { margin:0 0 20px; font:400 13px/1.6 system-ui; color:#64748b; }
.photo-editor-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; font:500 14px/1.5 system-ui; }
.photo-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.photo-editor-card { min-width:0; border:1px solid #e4e9f0; border-radius:14px; overflow:hidden; background:#fff; }
.photo-editor-image { position:relative; background:#f4f7fb; }
.photo-editor-image img { display:block; width:100%; height:180px; object-fit:contain; }
.photo-editor-image > span { position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:6px; background:#fff; color:#2563eb; font:600 12px/1.5 system-ui; }
.photo-editor-card-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px; }
.product-photo-editor .photo-editor-card-actions button { flex:1 1 40%; min-height:36px; background:#fff; font-size:13px; white-space:normal; }
.photo-editor-cover { width:100%; padding:8px 0; color:#64748b; text-align:center; font-size:13px; }
.photo-editor-empty { grid-column:1/-1; padding:48px 16px; border:1px dashed #cbd5e1; border-radius:14px; text-align:center; color:#64748b; }
.photo-editor-message { min-height:20px; margin:16px 0 0; font:400 13px/1.5 system-ui; color:#475569; overflow-wrap:anywhere; }
.product-photo-editor footer { justify-content:space-between; align-items:center; padding:16px 24px; border-top:1px solid #e4e9f0; background:#f8fafc; }
.product-photo-editor footer > span { color:#64748b; font-size:12px; }
.product-photo-editor footer > div { display:flex; gap:10px; }
.product-photo-editor .product-gallery-save { background:#2563eb; border-color:#2563eb; }
@media(max-width:600px) { .photo-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .product-photo-editor header,.product-photo-editor footer { padding:16px; } .product-photo-editor .photo-editor-body { padding:16px; } .photo-editor-image img { height:140px; } }
.product-gallery-dialog button:disabled { opacity:.6; cursor:wait; }
.catalog-product-with-image { display:flex; align-items:center; gap:12px; }
.product-image-carousel { position:relative; flex:0 0 auto; width:64px; height:64px; margin:0 auto; overflow:hidden; border-radius:10px; background:#f5f2ed; }
.catalog-product-with-image .product-image-carousel { margin:0; }
.product-image-viewport { display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x pan-y; cursor:grab; }
.product-image-viewport::-webkit-scrollbar { display:none; }
.product-image-viewport:focus-visible { outline:2px solid #287bd1; outline-offset:-2px; }
.product-image-viewport.is-dragging { scroll-snap-type:none; cursor:grabbing; }
.product-image-slide { position:relative; flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always; }
.product-image-slide > img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; }
.product-image-placeholder { display:grid; width:100%; height:100%; place-items:center; color:#687383; font:600 20px system-ui; }
/* Keep the primary upload button in its existing data-action/permission flow. */
body .product-image-carousel .product-image-slide > .record-image-button { width:100% !important; height:100% !important; min-height:0 !important; margin:0 !important; border:0; border-radius:0 !important; box-shadow:none; transform:none; }
body .product-image-carousel .record-image-button img { object-fit:contain; }
body .product-image-carousel.has-multiple-images .record-image-badge { top:3px; bottom:auto; right:3px; width:17px; height:17px; }
body .product-image-carousel .product-image-arrow { position:absolute; bottom:3px; z-index:1; display:grid; place-items:center; width:19px; height:21px; min-height:0; padding:0; margin:0; border:0; border-radius:5px; background:#fffdf6df; box-shadow:0 1px 3px #24242429; color:#27323c; font:600 20px/1 system-ui; cursor:pointer; }
.product-image-arrow.previous { left:3px; }
.product-image-arrow.next { right:3px; }
body .product-image-carousel .product-image-arrow:disabled { opacity:.35; cursor:default; }
.product-image-count { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); padding:0 2px; border-radius:3px; background:#fffdf6cf; color:#27323c; font:500 9px/13px system-ui; pointer-events:none; }
@media(max-width:760px) { .image-cell .product-image-carousel { width:48px; height:48px; } .image-cell .product-image-count { display:none; } }
@media(max-width:600px) { .product-gallery-content { padding:16px; } .product-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .product-gallery-preview > div { flex-direction:column; gap:4px; } }