.cf-image-frame-editor{padding:22px;border:1px solid #ddd6e6;border-radius:14px;background:#faf8fc;min-width:0}
.cf-image-frame-editor[hidden],.cf-image-frame-editor [hidden]{display:none!important}
.cf-image-frame-editor h3{margin:0 0 8px;font-size:18px}
.cf-image-frame-editor .help{line-height:1.55}
.cf-frame-toggle,.cf-frame-actions label{display:flex;align-items:center;gap:8px}
.cf-image-frame-editor input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
.cf-frame-rulers{position:relative;margin:42px 14px 0 40px;max-width:700px}
.cf-frame-viewport{position:relative;width:100%;aspect-ratio:7/5;overflow:hidden;background:#f6f3f1;outline:1px solid #b8afbf;cursor:grab;touch-action:none;user-select:none}
.cf-frame-viewport:focus-visible{outline:3px solid #7154bd;outline-offset:3px}
.cf-frame-viewport.is-dragging{cursor:grabbing}
.cf-frame-viewport>[data-frame-image]{position:absolute;max-width:none;transform:translate(-50%,-50%);object-fit:fill;pointer-events:none}
.cf-frame-ruler-x{position:absolute;left:0;top:-27px;width:100%;height:27px;border-bottom:1px solid #9c92a6}
.cf-frame-ruler-y{position:absolute;left:-37px;top:0;height:100%;width:37px;border-right:1px solid #9c92a6}
.cf-frame-tick{position:absolute;color:#5c5266;font-size:10px;font-variant-numeric:tabular-nums;font-family:system-ui,sans-serif}
.cf-frame-tick b{white-space:nowrap;word-break:normal;overflow-wrap:normal}
.cf-frame-ruler-x .cf-frame-tick{height:5px;border-left:1px solid #9c92a6;bottom:0}
.cf-frame-ruler-x .cf-frame-tick.is-major{height:10px}
.cf-frame-ruler-x b{position:absolute;bottom:11px;left:0;transform:translateX(-50%);font-weight:500}
.cf-frame-ruler-y .cf-frame-tick{width:5px;border-top:1px solid #9c92a6;right:0}
.cf-frame-ruler-y .cf-frame-tick.is-major{width:9px}
.cf-frame-ruler-y b{position:absolute;right:11px;top:0;transform:translateY(-50%);font-weight:500}
.cf-frame-guide{position:absolute;left:0;right:0;border-top:2px dashed #c91575;pointer-events:none;filter:drop-shadow(0 1px 0 #fff)}
.cf-frame-guide span{position:absolute;right:4px;bottom:4px;padding:2px 5px;border-radius:3px;background:#fff;color:#9e0b59;font:11px system-ui,sans-serif}
.cf-frame-zoom{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.cf-frame-zoom>label:not(.cf-frame-zoom-value){flex:1;min-width:80px}
.cf-image-frame-editor input[type=range]{width:100%;padding:0;accent-color:#d92b88;cursor:pointer}
.cf-frame-zoom-value{display:flex;align-items:center;gap:4px}
.cf-frame-zoom-value input{width:85px}
.cf-image-frame-editor input[type=number]{box-sizing:border-box;min-height:40px;padding:8px;border:1px solid #d9d2e2;border-radius:7px;background:#fff;color:inherit;font:inherit}
.cf-frame-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.cf-frame-values label{display:grid;gap:5px;font-size:12px}
.cf-frame-values input{width:100%;min-width:0}
.cf-frame-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.cf-frame-actions label{font-size:12px}
.cf-frame-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Only products with an explicitly saved homepage composition use a square detail frame. */
.product-visual[data-cf-image-frame]>[data-cf-gallery-main]{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
@media(max-width:600px){
 .cf-image-frame-editor{padding:12px}
 .cf-frame-rulers{margin-left:32px;margin-right:10px}
 .cf-frame-ruler-y{left:-31px;width:31px}
 .cf-frame-tick{font-size:8px}
 .cf-frame-values{grid-template-columns:1fr}
 .cf-frame-zoom{gap:6px}
 .cf-frame-zoom-value input{width:68px}
 .cf-frame-zoom button{padding:9px 12px}
}