/* NOTE: do NOT hard-pin the .pcr-app position here. Pickr/nanopop positions the popover next to the swatch that opened it; a removed override used to park every picker on the far-left of the screen regardless of which swatch was clicked. The classic theme already positions .pcr-app; let nanopop drive it. */ /* Force the popover above every overlay on the Design page (modals, drawers, sticky preview pane). Pickr appends .pcr-app to , so it competes with z-50 modals + z-40 backdrops without a hook of its own — the click registered but the picker was painted underneath them and looked "not open". */ .pcr-app { z-index: 9999 !important; } /* ── Fursa popover chrome (title + recent colors) ───────────── Injected into .pcr-app by pickr_swatch_controller. Plain CSS: the Pickr root is appended to , outside Tailwind's scope. */ .pcr-app .fursa-pickr-title { display: flex; flex-direction: column; gap: 2px; margin: 2px 2px 12px; } .pcr-app .fursa-pickr-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9ca3af; } .pcr-app .fursa-pickr-name { font-size: 15px; font-weight: 700; color: #111827; } .pcr-app .fursa-pickr-recent { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f1f1; } .pcr-app .fursa-pickr-recent:empty { display: none; } .pcr-app .fursa-pickr-recent-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9ca3af; margin-bottom: 8px; } .pcr-app .fursa-pickr-recent-row { display: flex; flex-wrap: wrap; gap: 6px; } .pcr-app .fursa-pickr-recent-dot { width: 22px; height: 22px; border-radius: 9999px; border: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; padding: 0; transition: transform 0.12s ease; } .pcr-app .fursa-pickr-recent-dot:hover { transform: scale(1.15); }