.photo-color-dialog{width:min(920px,calc(100% - 24px));max-width:920px;max-height:90dvh;overflow:auto;padding:24px;border:1px solid #d6ded0;border-radius:24px;color:#253e35;background:#fffefa}.photo-color-dialog::backdrop{background:#19372f88}.photo-color-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.photo-color-heading h2{margin:0;font-size:clamp(22px,4vw,30px)}.photo-color-heading button{min-width:44px;min-height:44px;border-radius:50%;border:1px solid #d6ded0;background:#edf1e7;font-size:26px}.photo-color-file{display:inline-flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px;border:1px solid #b7c7b1;border-radius:14px;background:#edf1e7;font-weight:700}.photo-color-file input{max-width:100%;font:inherit;font-weight:400}.photo-color-canvas-wrap{margin:18px 0;text-align:center}.photo-color-canvas-wrap canvas{display:block;max-width:100%;max-height:48dvh;width:auto;height:auto;margin:auto;border-radius:14px;cursor:crosshair;touch-action:manipulation;box-shadow:0 0 0 1px #d6ded0}.photo-color-picked{display:flex;align-items:center;gap:16px;padding:12px;background:#edf1e7;border-radius:14px}.photo-color-picked[hidden],.photo-color-canvas-wrap[hidden]{display:none}.photo-color-picked label{display:flex;align-items:center;gap:12px;font-weight:700}.photo-color-picked input{width:54px;height:44px;border:0;padding:0;cursor:pointer}.photo-color-hex{font-variant-numeric:tabular-nums}.photo-color-match-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.photo-color-match-grid article{background:#fff;border:1px solid #dde3d8;border-radius:16px;overflow:hidden;padding-bottom:10px}.photo-color-match-grid button{display:block;width:100%;border:0;background:white;padding:10px;color:inherit;text-align:left;cursor:pointer}.photo-color-match-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}.photo-color-match-grid strong,.photo-color-match-grid button span{display:block;margin-top:6px}.photo-color-match-grid button span{font-size:12px;color:#657269}.photo-color-match-grid .product-price{margin:4px 10px}.photo-color-error:empty{display:none}.photo-color-error{color:#9b3427}.photo-color-dialog button:focus-visible,.photo-color-dialog canvas:focus-visible{outline:3px solid #c56c43;outline-offset:3px}@media(max-width:600px){.photo-color-dialog{padding:16px;border-radius:18px}.photo-color-match-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-color-file{display:block}.photo-color-file input{display:block;margin-top:10px}.photo-color-canvas-wrap canvas{max-height:40dvh}.photo-color-picked{gap:10px;flex-wrap:wrap}}

.color-picker-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.color-picker-tabs button{min-height:40px;padding:8px 12px;border:1px solid #bdcdb6;border-radius:20px;background:white;color:#294435;font:600 12px system-ui}.color-picker-tabs button[aria-pressed=true]{background:#294435;color:white}.color-picker-tools h3{font-size:17px;margin:12px 0}.color-basic-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.color-basic-grid button{display:grid;gap:5px;justify-items:center;min-height:70px;padding:7px 3px;border:1px solid #d5decf;background:white;border-radius:10px;font:12px system-ui;color:#294435}.color-basic-grid button[aria-pressed=true]{outline:2px solid #426343}.color-basic-grid button>span{width:32px;height:32px;background:var(--sample);border:1px solid #0002;border-radius:50%}.color-sv-plane{position:relative;width:100%;height:220px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--hue,#00a080);border-radius:14px;touch-action:none;cursor:crosshair;overflow:hidden}.color-sv-plane>span,.color-hue-wheel>span{position:absolute;width:16px;height:16px;border:2px solid white;box-shadow:0 0 0 1px #0009;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.color-hue-wheel{width:240px;height:240px;position:relative;margin:10px auto;background:radial-gradient(circle,white,transparent 70%),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;touch-action:none;cursor:crosshair}.color-sliders{display:grid;gap:8px;margin:16px 0}.color-sliders label{display:grid;grid-template-columns:85px minmax(0,1fr) 45px;gap:10px;align-items:center;font-size:12px}.color-sliders input{width:100%;accent-color:#35543e;min-height:30px}.color-sliders output{text-align:right}.color-manual{display:flex;flex-wrap:wrap;align-items:end;gap:9px;margin:12px 0}.color-manual label{display:grid;gap:4px;font-size:12px}.color-manual input{font:14px monospace;min-height:44px;padding:8px;border:1px solid #bccbb6;border-radius:9px;width:125px;box-sizing:border-box}.color-manual>p{flex-basis:100%;margin:3px 0}.color-manual button{min-height:44px}.visual-color-target{display:flex;align-items:center;gap:6px;border:1px solid #b9c8b3;border-radius:9px;padding:7px;min-height:38px;background:white;font:12px monospace}.visual-color-target:before{content:"";width:18px;height:18px;flex:none;background:var(--picked);border:1px solid #0003;border-radius:4px}.visual-filter-heading>[data-color-picker-open]{min-height:40px;font-size:12px;padding:8px 10px}.catalog-layout .visual-filter-heading>[data-color-picker-open]{width:100%}.color-picker-tools [hidden]{display:none!important}.color-picker-tools :is(button,input,[tabindex]):focus-visible{outline:3px solid #d56a3f;outline-offset:3px}
@media(max-width:600px){.color-basic-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.color-basic-grid button{font-size:11px}.color-picker-tabs{gap:5px}.color-picker-tabs button{min-height:40px;font-size:11px;padding:7px 10px}.color-hue-wheel{width:210px;height:210px}.color-sv-plane{height:190px}.color-sliders label{grid-template-columns:74px minmax(0,1fr) 36px;gap:6px}.color-manual>button[data-color-apply]{width:100%}.catalog-layout .visual-filter-heading>[data-color-picker-open]{width:auto}.visual-filters[data-filters-expanded=false] .photo-color-open{display:inline-flex!important}.visual-filter-heading{gap:5px}.visual-filter-heading .photo-color-open{margin:0!important}}