.phone-color-visual{min-width:0}
.phone-color-stage{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;height:var(--photo-stage-height,360px);overflow:hidden}
.phone-color-view{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%;height:100%;flex:1}
.phone-color-stage .phone-color-view>img{display:block;position:static;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform:none}
.phone-color-stage--pair .phone-color-view{max-width:calc(50% - 7px)}
.phone-color-crop{position:relative;overflow:hidden;max-height:100%;max-width:100%;flex:none}
.phone-color-stage .phone-color-crop>img{position:absolute;left:0;top:0;height:auto;max-width:none;max-height:none;object-fit:initial;transform-origin:top left}
.phone-color-picker{position:relative;min-width:0;margin-top:14px;text-align:left}
.phone-color-label{font-size:14px;line-height:1.5;color:#62584f;margin:0 0 7px}
.phone-color-label strong{color:#242220;font-weight:600}
.phone-color-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.phone-color-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:2px solid transparent;border-radius:50%;background:transparent;cursor:pointer;touch-action:manipulation;flex:none;transition:border-color .15s,background .15s}
.phone-color-swatch>span{display:block;width:27px;height:27px;box-sizing:border-box;border:1px solid #8b8177;border-radius:50%;background:var(--swatch)}
.phone-color-swatch[aria-checked=true]{border-color:#a84700;background:#fff1e5}
.phone-color-swatch:hover{border-color:#ba9575}
.phone-color-swatch:focus-visible{outline:3px solid #a84700;outline-offset:3px}
.phone-color-swatch>svg{display:none;position:absolute;right:-2px;bottom:-1px;width:15px;height:15px;padding:1px;border-radius:50%;background:#a84700;fill:none;stroke:white;stroke-width:2.5;pointer-events:none}
.phone-color-swatch[aria-checked=true]>svg{display:block}
.phone-color-availability{font-size:12px;line-height:1.5;color:#70665e;margin:8px 0 0;max-width:380px}
.phone-color-visual>.phone-color-picker{width:100%;max-width:420px;margin:17px auto 0}
.phone-color-visual>figcaption{font-size:12px;line-height:1.5;margin-top:12px;color:#70665e}
.phone-overview-card .phone-color-picker{margin:15px 0 7px}
.phone-overview-card .phone-color-label{font-size:13px;margin-bottom:4px}
.phone-overview-card .phone-color-swatches{gap:8px}
.phone-overview-card .phone-color-visual>figcaption{font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.phone-color-missing,.phone-color-failed{display:block;padding:20px;color:#62584f;font-size:14px;line-height:1.5;text-align:center}
.phone-overview-card [data-phone-colors]{pointer-events:none}
.phone-overview-card [data-phone-colors] button{pointer-events:auto}
.color-live-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:620px){
 .phone-color-stage{gap:10px}
 .phone-color-visual>.phone-color-picker{max-width:none}
 .phone-color-label{font-size:15px}
 .phone-color-availability{font-size:13px}
 .phone-overview-card .phone-color-visual>figcaption{font-size:10px}
 .phone-overview-card .phone-color-swatches{gap:8px}
}
@media(prefers-reduced-motion:reduce){.phone-color-swatch{transition:none}}