/* Rendering uses metadata only: source URLs and uploaded originals stay intact. */
img[data-image-presentation] {
    object-fit: var(--image-fit, contain) !important;
    object-position: var(--image-x, 50%) var(--image-y, 50%) !important;
    scale: var(--image-zoom, 1);
    transform-origin: var(--image-x, 50%) var(--image-y, 50%);
}
.shop-product-image[data-image-presentation] { transform:none !important; }
/* Stable header viewport provides room for padded PNGs at an editable scale. */
.site-brand:has(.site-brand-logo) { width:220px; height:64px; overflow:hidden; flex-shrink:0; }
.site-brand-logo[data-image-presentation] { width:220px !important; height:64px !important; max-width:none !important; max-height:none !important; }
.product-card-image, .product-buy-main-image, .product-buy-thumb, .cart-item-image,
.mega-shop-image, .category-mega-image, .more-menu-image, .statement-image,
.home-final, .collection-card, .home-hero-visual, .home-hero, .admin-brand-main { overflow:hidden; }
.image-editor-viewport img[data-image-presentation] { scale:var(--image-zoom, 1); object-fit:var(--image-fit, contain) !important; }
@media (max-width:700px) {
    .compact-product-images:has(.image-editor) { grid-template-columns:minmax(0,1fr); }
    img[data-image-presentation] { object-fit:var(--image-mobile-fit, var(--image-fit, contain)) !important; scale:var(--image-mobile-zoom, var(--image-zoom, 1)); object-position:var(--image-mobile-x, var(--image-x, 50%)) var(--image-mobile-y, var(--image-y, 50%)) !important; transform-origin:var(--image-mobile-x, var(--image-x, 50%)) var(--image-mobile-y, var(--image-y, 50%)); }
    .site-brand:has(.site-brand-logo) { width:160px; height:48px; }
    .site-brand-logo[data-image-presentation] { width:160px !important; height:48px !important; }
}

/* Shared admin editor. Source-image rendering rules elsewhere remain unchanged. */
.image-editor { --image-preview-height:200px; border:1px solid #d8d3ca; border-radius:8px; padding:12px; margin:10px 0; min-width:0; color:#303030; background:#faf9f6; box-sizing:border-box; }
.image-editor *, .image-editor *::before, .image-editor *::after { box-sizing:border-box; }
.image-editor legend { font-weight:600; font-size:12px; padding:0 5px; }
.image-editor[data-kind=logo] { --image-preview-height:120px; }
.image-editor[data-kind=hero], .image-editor[data-kind=banner] { --image-preview-height:180px; }
.image-editor .image-editor-preview { display:flex; justify-content:center; margin:10px 0; min-width:0; }
.image-editor .image-editor-viewport { position:relative; width:min(100%, calc(var(--image-preview-height) * var(--image-preview-ratio, 1))); overflow:hidden; background:#f0efeb; border:1px solid #ddd9d2; border-radius:5px; cursor:crosshair; isolation:isolate; }
.image-editor .image-editor-viewport img { position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; pointer-events:none; }
.image-editor .image-editor-viewport:focus-visible, .image-editor button:focus-visible, .image-editor summary:focus-visible { outline:2px solid #5a7292; outline-offset:2px; }
.image-editor .image-editor-empty { position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-size:12px; color:#777; }
/* The editor owns its empty state; suppress the generic admin fallback. */
.image-editor .admin-image-placeholder { display:none; }
.image-editor [hidden] { display:none !important; }
.image-editor .image-editor-point { position:absolute; width:12px; height:12px; border:2px solid white; border-radius:50%; background:#2b6292; translate:-50% -50%; pointer-events:none; box-shadow:0 0 0 1px #222; }
.image-editor .image-editor-toolbar, .image-editor .image-editor-position-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; align-items:start; }
.image-editor .image-editor-toolbar label, .image-editor .image-editor-position-controls label { display:block; font-size:12px; line-height:1.5; margin:0; text-transform:none; letter-spacing:normal; font-weight:500; }
.image-editor select { display:block; width:100%; min-height:36px; padding:6px 8px; margin:4px 0 0; font:inherit; border:1px solid #ccc; border-radius:4px; color:inherit; background:white; }
.image-editor input[type=range] { display:block; width:100%; min-height:36px; padding:0; margin:4px 0 0; cursor:pointer; }
.image-editor input[type=checkbox] { width:auto; min-height:0; margin:0; }
.image-editor output { float:right; font-size:11px; font-variant-numeric:tabular-nums; }
.image-editor button, .image-editor summary { cursor:pointer; background:white; color:#303030; border:1px solid #bbb; padding:7px 9px; border-radius:4px; font:inherit; font-size:12px; min-height:36px; letter-spacing:normal; text-transform:none; }
.image-editor .image-editor-context-tabs { display:flex; gap:4px; padding:3px; border:1px solid #dedad2; border-radius:6px; background:#eeece6; }
.image-editor .image-editor-context-tabs button { flex:1; min-width:0; background:transparent; border-color:transparent; }
.image-editor .image-editor-context-tabs button[aria-selected=true] { background:white; border-color:#c8c3b9; font-weight:600; }
.image-editor .image-editor-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:start; margin:10px 0 6px; }
.image-editor .image-editor-advanced { flex:1 1 140px; min-width:0; }
.image-editor .image-editor-advanced summary { width:fit-content; }
.image-editor .image-editor-advanced[open] { flex-basis:100%; order:2; }
.image-editor .image-editor-advanced[open] summary { margin-bottom:8px; }
.image-editor .image-editor-position-controls { border-top:1px solid #dedad2; padding-top:8px; }
.image-editor .image-editor-mobile-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; grid-column:1/-1; }
.image-editor .image-editor-mobile-toggle { display:flex !important; align-items:center; gap:8px; grid-column:1/-1; min-height:36px; }
.image-editor .image-editor-screen { grid-column:1/-1; display:flex !important; align-items:center; justify-content:space-between; gap:12px; }
.image-editor .image-editor-screen select { width:auto; max-width:60%; margin:0; }
.image-editor .image-editor-help, .image-editor .image-editor-empty small { display:block; font-size:11px; line-height:1.45; margin:0; color:#777; }
.image-editor[data-kind=logo] .image-editor-point { display:none; }
.image-editor[data-kind=logo] .image-editor-viewport { cursor:default; background:white; }
.compact-product-images:has(.image-editor) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; margin-bottom:16px; }
.compact-product-image-item:has(.image-editor) { width:auto; min-width:0; }
.compact-product-image-item:has(.image-editor) input[type=file] { margin:0; min-height:36px; font-size:12px; }
.compact-product-image-item:has(.image-editor) > small { font-size:11px; line-height:1.4; }
.company-settings-brand-grid:has(.image-editor) { grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr); gap:24px; }
/* Hide old previews while retaining their IDs for existing upload handlers. */
.compact-product-image-item:has(.image-editor) > .compact-image-preview,
div:has(> .image-editor) > .company-logo-preview,
div:has(> .image-editor) > .shop-category-image-preview,
.homepage-field:has(> .image-editor) > .homepage-wide-preview,
.homepage-field:has(> .image-editor) > .homepage-mobile-preview,
.homepage-field:has(> .image-editor) > .homepage-final-preview,
.homepage-admin-card:has(.image-editor) > .homepage-image-preview,
.homepage-statement-image:has(.image-editor) .homepage-statement-preview,
.dist-field:has(.image-editor) > .dist-form-image { display:none; }
@media(min-width:701px) and (max-width:1100px) { .image-editor[data-kind=product] { --image-preview-height:180px; } }
@media(max-width:1100px) { .company-settings-brand-grid:has(.image-editor) { grid-template-columns:minmax(0,1fr); } .company-settings-brand-grid .image-editor { max-width:540px; } }
@media(max-width:700px) {
    .compact-product-images:has(.image-editor) { grid-template-columns:minmax(0,1fr); }
    .image-editor { --image-preview-height:180px; padding:10px; }
    .image-editor[data-kind=logo] { --image-preview-height:110px; }
    .image-editor[data-kind=hero], .image-editor[data-kind=banner] { --image-preview-height:160px; }
    .image-editor button, .image-editor summary, .image-editor select { min-height:40px; }
    .image-editor input[type=range] { min-height:40px; }
    .image-editor .image-editor-mobile-controls { grid-template-columns:minmax(0,1fr); }
}