/* personalization drawer */
.scrim { position: fixed; inset: 0; background: rgb(var(--scrim) / 0.55); opacity: 0; pointer-events: none; transition: opacity var(--motion); z-index: 10; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 100vw); background: var(--surface); border-left: 1px solid var(--line); z-index: 11;
  transform: translateX(100%); transition: transform var(--motion); display: flex; flex-direction: column; }
body.drawer-open .scrim { opacity: 1; pointer-events: auto; }
body.drawer-open .drawer { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); font-weight: 600; font-size: var(--fs-lg); }
.drawer-body { padding: var(--sp-5); overflow: auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.group h3 { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); margin-bottom: var(--sp-3); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-control); }
.seg button { height: 34px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.swatches { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; background: var(--c); outline: 1px solid var(--line); outline-offset: 1px; }
.swatch[aria-pressed="true"] { border-color: var(--surface); outline: 2px solid var(--text); }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.thumb { aspect-ratio: 4 / 3; border: 2px solid transparent; border-radius: var(--radius-control); background: var(--surface-2) center / cover; outline: 1px solid var(--line); }
.thumb.solid { background: var(--bg); display: grid; place-items: center; color: var(--muted); font-size: var(--fs-xs); }
.thumb[aria-pressed="true"] { border-color: var(--surface); outline: 2px solid var(--accent); }
.range { width: 100%; accent-color: var(--accent); }
.hint { color: var(--muted); font-size: var(--fs-xs); margin-top: var(--sp-2); }