.product-symbol{width:58px;height:58px;vertical-align:middle;margin-right:15px}
html[data-theme="after-dark"] .product-symbol{filter:brightness(0) invert(.93)}
.color-picker{min-height:48px;cursor:pointer;text-align:left}
.custom-color-dialog{width:360px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:22px;color:var(--theme-text);background:var(--theme-surface)}
.custom-color-dialog h2{margin:0 0 18px;font-size:25px}
.custom-color-dialog .picker-square{display:block;position:relative;width:100%;height:auto;aspect-ratio:1;margin:0;border-radius:8px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none;cursor:crosshair;border:1px solid #888;overflow:hidden}
.picker-indicator{position:absolute;width:22px;height:22px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #222,0 1px 5px #0008;transform:translate(-50%,-50%);pointer-events:none}
.picker-square:focus-visible{outline:3px solid var(--theme-text);outline-offset:4px}
.picker-hue-label{display:block;font-size:12px;margin:16px 0 10px}
.picker-hue{display:block;appearance:none;width:100%;height:40px;margin:5px 0 0;border:1px solid #888;border-radius:20px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer;touch-action:none}
.picker-hue::-webkit-slider-thumb{appearance:none;width:18px;height:44px;border:3px solid #fff;border-radius:9px;background:transparent;box-shadow:0 0 0 1px #222}
.picker-hue::-moz-range-thumb{width:14px;height:38px;border:3px solid #fff;border-radius:9px;background:transparent;box-shadow:0 0 0 1px #222}
.custom-color-dialog .picker-preview{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0;font-size:12px}
.custom-color-dialog .picker-sample{display:block;width:58%;height:42px;border:1px solid #888;border-radius:6px}
.custom-color-dialog .picker-swatches{display:flex;flex-wrap:wrap;gap:0;justify-content:space-between;margin:10px -3px}
.picker-swatches .swatch{flex:1;width:0;min-width:0;max-width:40px;height:40px;border-width:6px;border-color:var(--theme-surface);box-shadow:none;position:relative}
.picker-swatches .swatch[aria-pressed=true]{outline:2px solid var(--theme-text);outline-offset:-4px}
.custom-color-dialog .picker-actions{display:flex;justify-content:flex-end;gap:12px;margin:16px 0 0;position:sticky;bottom:-22px;padding:12px 0;background:var(--theme-surface)}
.picker-actions button{min-height:44px;min-width:92px}.picker-actions .primary{padding:10px 23px}
@media(max-height:690px){.custom-color-dialog{width:320px;padding:16px}.custom-color-dialog .picker-square{width:min(100%,34dvh);margin-inline:auto}.custom-color-dialog h2{margin-bottom:12px}.custom-color-dialog .picker-actions{bottom:-16px}}

input:focus-visible,select:focus-visible{outline:3px solid #9a6954;outline-offset:3px}
.canvas-view{position:absolute;inset:0;transform-origin:0 0;background:#fffdf8;will-change:transform}
#canvas-wrap{touch-action:none}#fit-canvas{display:block;margin:10px 0 0 auto;min-height:44px;font-size:12px}
@media(max-width:700px){.product-symbol{width:43px;height:43px;margin-right:10px}}

.color-picker{transition:none}

@media(max-height:690px){.picker-hue-label{margin:10px 0 6px}.custom-color-dialog .picker-preview{margin:8px 0}.custom-color-dialog .picker-swatches{margin:8px -3px}.custom-color-dialog .picker-actions{margin-top:8px;padding:6px 0}}