/* Compare picker (same look as the product switcher) */
.cmpbar { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
.cmp-open { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px 14px; border-radius: 99px; background: var(--surface); font-weight: 600; font-size: 13px; color: var(--text); }
.cmp-open.link { background: none; padding: 7px 4px; color: var(--mute); }
.cmpchip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 6px 5px 12px; border-radius: 99px; background: var(--surface); font-weight: 600; font-size: 13px; }
.cmpchip i { width: 18px; border-top: 2px dashed var(--text); }
.cmpchip button { all: unset; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--mute); background: var(--raise); }
.pk-scrim { position: fixed; inset: 0; background: #0009; z-index: 29; opacity: 0; pointer-events: none; transition: opacity .25s; }
.pk-scrim[data-open] { opacity: 1; pointer-events: auto; }
.pk { position: fixed; z-index: 30; left: 50%; top: 50%; width: min(520px, calc(100% - 32px)); height: min(640px, 80vh); transform: translate(-50%, -46%) scale(.98); opacity: 0; pointer-events: none;
  background: var(--deep); border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px #000c; display: flex; flex-direction: column; transition: transform .25s var(--ease), opacity .2s; }
.pk[data-open] { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.pk .grab { display: none; }
.pk .t { display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 760px) {
  .pk { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 86vh; border-radius: 20px 20px 0 0; transform: translateY(105%); opacity: 1; }
  .pk[data-open] { transform: none; }
  .pk .grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 10px auto 0; flex: none; }
}
.cmpchip b.up { color: var(--buy); } .cmpchip b.dn { color: var(--bad); }
.cmpnote { font-size: 12px; color: var(--faint); }
@media (pointer: coarse), (max-width: 760px) { .cmp-open { min-height: 44px; } }
