/* Selection surfaces remain scoped after they are portalled to body. */
:is(#prodRecoOverlay,#fpickOverlay) { padding:24px; align-items:center; }
:is(#prodRecoOverlay .prod-reco-modal,#fpickOverlay .fpick-modal) { width:min(720px,100%); max-width:720px; max-height:min(680px,calc(100dvh - 48px)); border:1px solid var(--ds-line); border-radius:28px; background:var(--ds-surface); color:var(--ds-ink); font-family:var(--ds-font); box-shadow:0 32px 80px -24px rgba(20,24,40,.3); }
:is(#prodRecoOverlay .prod-reco-head,#fpickOverlay .fpick-head) { flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--ds-line); }
:is(#prodRecoOverlay,#fpickOverlay) .selection-dialog-icon { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:16px; background:var(--ds-accent-soft); color:var(--ds-accent); }
:is(#prodRecoOverlay,#fpickOverlay) .selection-dialog-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:is(#prodRecoOverlay,#fpickOverlay) .selection-dialog-heading { flex:1; min-width:0; }
:is(#prodRecoOverlay .prod-reco-title,#fpickOverlay .fpick-h) { margin:0; font:650 20px/1.3 var(--ds-font); letter-spacing:-.025em; overflow-wrap:anywhere; }
:is(#prodRecoOverlay .prod-reco-hint,#fpickOverlay .fpick-sub) { margin:5px 0 0; color:var(--ds-ink-secondary); font:400 14px/1.5 var(--ds-font); overflow-wrap:anywhere; }
:is(#prodRecoOverlay .prod-icon-btn,#fpickOverlay .fpick-close) { display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; height:44px; padding:0; margin:0; border:0; border-radius:50%; background:var(--ds-surface-subtle); box-shadow:none; color:var(--ds-ink-secondary); cursor:pointer; }
:is(#prodRecoOverlay .prod-icon-btn,#fpickOverlay .fpick-close):hover { background:var(--ds-line); color:var(--ds-ink); }
:is(#prodRecoOverlay .prod-icon-btn,#fpickOverlay .fpick-close) svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
#prodRecoOverlay .prod-reco-body { min-height:0; padding:16px 20px; overflow-y:auto; overscroll-behavior:contain; background:var(--ds-surface-subtle); }
#prodRecoOverlay .prod-reco-context { padding:12px 14px; margin-bottom:14px; border:1px solid var(--ds-line); border-radius:22px; background:var(--ds-surface); }
#prodRecoOverlay .prod-reco-context > span { color:var(--ds-ink-secondary); font:400 12px/1.5 var(--ds-font); }
#prodRecoOverlay .prod-reco-sub { margin:6px 0 0; font:500 14px/1.5 var(--ds-font); color:var(--ds-ink); overflow-wrap:anywhere; }
#prodRecoOverlay .selection-search-label { display:block; margin:0 0 8px; font:500 13px/1.5 var(--ds-font); color:var(--ds-ink-secondary); }
#prodRecoOverlay .prod-reco-add { display:flex; flex-wrap:wrap; align-items:center; gap:10px; height:auto; padding:0; margin:0 0 14px; border-radius:0; background:transparent; }
:is(#prodRecoOverlay .prod-reco-search-field,#fpickOverlay .selection-search-field) { display:flex; align-items:center; gap:10px; min-width:0; flex:1; min-height:48px; padding:0 16px; border:1px solid var(--ds-line); border-radius:999px; background:var(--ds-surface); box-shadow:0 3px 10px rgba(25,28,45,.04),0 10px 24px rgba(25,28,45,.035); }
:is(#prodRecoOverlay .prod-reco-search-field,#fpickOverlay .selection-search-field) > svg { flex:0 0 18px; width:18px; height:18px; fill:none; stroke:var(--ds-ink-secondary); stroke-width:1.7; stroke-linecap:round; }
:is(#prodRecoOverlay .prod-reco-search-field input,#fpickOverlay .selection-search-field input) { width:100%; min-width:0; height:46px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none; color:var(--ds-ink); font:400 16px/1.4 var(--ds-font); }
:is(#prodRecoOverlay .prod-reco-search-field,#fpickOverlay .selection-search-field):focus-within { outline:2px solid var(--ds-accent); outline-offset:2px; }
:is(#prodRecoOverlay .prod-reco-search-field input,#fpickOverlay .selection-search-field input)::placeholder { font-style:normal; color:var(--ds-ink-secondary); }
#prodRecoOverlay .prod-reco-count { display:table; margin:0 0 12px; padding:6px 12px; border-radius:999px; background:var(--ds-accent-soft); color:var(--ds-accent-strong); font:500 13px/1.5 var(--ds-font); }
#prodRecoOverlay .prod-reco-list { display:flex; flex-direction:column; gap:8px; padding:0; overflow:visible; }
#prodRecoOverlay .prod-reco-section { margin:4px 0 0; padding:0 4px; color:var(--ds-ink-secondary); font:500 14px/1.5 var(--ds-font); letter-spacing:0; text-transform:none; }
#prodRecoOverlay .prod-reco-item { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; flex-shrink:0; min-width:0; padding:12px; border:1px solid var(--ds-line); border-radius:22px; background:var(--ds-surface); box-shadow:0 3px 10px rgba(25,28,45,.03); }
#prodRecoOverlay .prod-reco-item:hover { background:var(--ds-surface); border-color:var(--ds-line-strong); }
#prodRecoOverlay .prod-reco-item.is-selected { border-color:var(--ds-accent); }
#prodRecoOverlay .prod-reco-item-thumb { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; border:1px solid var(--ds-line); border-radius:16px; background-color:var(--ds-surface-subtle); color:var(--ds-ink-secondary); }
#prodRecoOverlay .prod-reco-item-thumb svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#prodRecoOverlay .prod-reco-item-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; text-overflow:ellipsis; overflow-wrap:anywhere; color:var(--ds-ink); font:500 15px/1.45 var(--ds-font); }
#prodRecoOverlay .prod-reco-item-meta { margin-top:6px; overflow-wrap:anywhere; color:var(--ds-ink-secondary); font:400 13px/1.5 var(--ds-font); }
:is(#prodRecoOverlay .prod-reco-add-btn,#prodRecoOverlay .prod-reco-pick,#fpickOverlay .fpick-toggle) { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; min-height:44px; height:auto; padding:11px 16px; border:1px solid var(--ds-line); border-radius:999px; background:var(--ds-surface); color:var(--ds-ink-secondary); box-shadow:0 3px 10px rgba(25,28,45,.04),0 10px 24px rgba(25,28,45,.035); font:500 14px/1.4 var(--ds-font); white-space:nowrap; cursor:pointer; }
:is(#prodRecoOverlay .prod-reco-add-btn,#prodRecoOverlay .prod-reco-pick,#fpickOverlay .fpick-toggle):hover:not(:disabled) { background:var(--ds-accent-soft); color:var(--ds-accent-strong); }
:is(#prodRecoOverlay .prod-reco-add-btn,#prodRecoOverlay .prod-reco-pick):disabled { opacity:.45; cursor:default; background:var(--ds-surface); color:var(--ds-ink-secondary); box-shadow:none; }
#prodRecoOverlay .prod-reco-pick svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
#prodRecoOverlay .prod-reco-rm { display:grid; place-items:center; width:44px; min-width:44px; height:44px; border:0; border-radius:50%; background:var(--ds-surface-subtle); color:var(--ds-ink-secondary); cursor:pointer; }
#prodRecoOverlay .prod-reco-rm:hover { background:var(--ds-red-soft); color:var(--ds-red); }
#prodRecoOverlay .prod-reco-rm svg { width:18px; height:18px; }
:is(#prodRecoOverlay .prod-reco-foot,#fpickOverlay .fpick-foot) { flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding:12px 20px; border-top:1px solid var(--ds-line); background:var(--ds-surface); }
:is(#prodRecoOverlay .drawer-btn,#fpickOverlay .fpick-cancel,#fpickOverlay .fpick-save) { display:inline-flex; align-items:center; justify-content:center; min-height:48px; height:auto; min-width:120px; flex:0 0 auto; margin:0; padding:12px 20px; border-radius:999px; font:500 14px/1.4 var(--ds-font); cursor:pointer; }
:is(#prodRecoOverlay .drawer-btn.secondary,#fpickOverlay .fpick-cancel) { border:1px solid var(--ds-line); background:var(--ds-surface); color:var(--ds-ink-secondary); box-shadow:0 3px 10px rgba(25,28,45,.04),0 10px 24px rgba(25,28,45,.035); }
:is(#prodRecoOverlay .drawer-btn.primary,#fpickOverlay .fpick-save) { border:1px solid transparent; background:var(--ds-accent); color:#fff; box-shadow:0 5px 14px rgba(61,109,218,.15); }
:is(#prodRecoOverlay .drawer-btn.primary,#fpickOverlay .fpick-save):hover:not(:disabled) { background:var(--ds-accent-strong); transform:none; }
#prodRecoOverlay .prod-reco-error { flex:1 0 100%; margin:0; color:var(--ds-red); font:400 13px/1.5 var(--ds-font); overflow-wrap:anywhere; }
#prodRecoOverlay .prod-reco-error:empty { display:none; }
#prodRecoOverlay .prod-reco-empty { padding:20px 16px; border:1px solid var(--ds-line); border-radius:22px; background:var(--ds-surface); color:var(--ds-ink-secondary); font:400 14px/1.55 var(--ds-font); text-align:center; }
#fpickOverlay [hidden] { display:none !important; }
#fpickOverlay .fpick-search { flex:0 0 auto; padding:12px 20px; gap:10px; flex-wrap:wrap; }
#fpickOverlay .fpick-list { display:flex; flex-direction:column; gap:6px; min-height:0; max-height:none; padding:12px 20px; overflow-y:auto; overscroll-behavior:contain; background:var(--ds-surface-subtle); }
#fpickOverlay .fpick-item { box-sizing:border-box; display:flex; flex:0 0 auto; align-items:center; gap:10px; min-height:54px; padding:10px 12px; border:1px solid var(--ds-line); border-radius:16px; background:var(--ds-surface); box-shadow:0 2px 6px rgba(25,28,45,.025); text-align:left; }
#fpickOverlay .fpick-item:hover { border-color:var(--ds-line-strong); }
#fpickOverlay .fpick-item.on { border-color:var(--ds-accent); background:var(--ds-surface); }
#fpickOverlay .fpick-cb { width:22px; height:22px; flex:0 0 22px; border-radius:7px; border:1px solid var(--ds-line-strong); }
#fpickOverlay .fpick-item.on .fpick-cb { border-color:var(--ds-accent); background:var(--ds-accent); }
#fpickOverlay .fpick-label { flex:1; min-width:0; }
#fpickOverlay .fpick-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space:normal; overflow-wrap:anywhere; font:500 14px/1.4 var(--ds-font); }
#fpickOverlay .fpick-details { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:12px; row-gap:2px; margin-top:3px; color:var(--ds-ink-secondary); font:400 12px/1.4 var(--ds-font); }
#fpickOverlay .fpick-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#fpickOverlay .fpick-details .fpick-count { flex-shrink:0; }
#fpickOverlay .fpick-count { color:var(--ds-ink-secondary); font:400 12px/1.5 var(--ds-font); }
#fpickOverlay .fpick-stat { flex:1; color:var(--ds-ink-secondary); font:400 13px/1.5 var(--ds-font); }
#fpickOverlay .fpick-keywords { min-height:0; overflow-y:auto; padding:24px; background:var(--ds-surface-subtle); }
#fpickOverlay .fpick-keywords label { font:500 14px/1.5 var(--ds-font); }
#fpickOverlay .fpick-keywords textarea { padding:16px; border:1px solid var(--ds-line); border-radius:20px; background:var(--ds-surface); font:400 16px/1.5 var(--ds-font); }
#fpickOverlay .fpick-keywords p { color:var(--ds-ink-secondary); font:400 13px/1.5 var(--ds-font); }
#fpickOverlay .fpick-stat b { color:var(--ds-accent-strong); font-weight:500; }
#fpickOverlay .fpick-empty { padding:24px 16px; border:1px solid var(--ds-line); border-radius:20px; background:var(--ds-surface); color:var(--ds-ink-secondary); font:400 14px/1.55 var(--ds-font); }
:is(#prodRecoOverlay,#fpickOverlay) :is(button,[tabindex]):focus-visible { outline:2px solid var(--ds-accent); outline-offset:3px; }
@media(max-width:600px) {
 :is(#prodRecoOverlay,#fpickOverlay) { padding:8px; align-items:center; }
 :is(#prodRecoOverlay .prod-reco-modal,#fpickOverlay .fpick-modal) { max-height:calc(100dvh - 16px); border-radius:24px; }
 :is(#prodRecoOverlay .prod-reco-head,#fpickOverlay .fpick-head) { padding:14px 16px; gap:10px; }
 :is(#prodRecoOverlay .prod-reco-title,#fpickOverlay .fpick-h) { font-size:19px; }
 :is(#prodRecoOverlay .prod-reco-body,#fpickOverlay .fpick-search,#fpickOverlay .fpick-list) { padding:12px 12px; }
 #prodRecoOverlay .prod-reco-item { grid-template-columns:44px minmax(0,1fr); gap:8px; padding:10px; }
 #prodRecoOverlay .prod-reco-item-thumb { width:44px; height:44px; }
 #prodRecoOverlay .prod-reco-item-thumb { grid-row:1; }
 #prodRecoOverlay .prod-reco-item-body { grid-column:1 / -1; grid-row:2; }
 #prodRecoOverlay .prod-reco-item :is(.prod-reco-pick,.prod-reco-rm) { grid-column:2; grid-row:1; justify-self:end; }
 #prodRecoOverlay .prod-reco-pick { min-width:120px; }
 #fpickOverlay .fpick-item { padding:10px; }
 #fpickOverlay .fpick-meta { flex-basis:100%; }
 :is(#prodRecoOverlay .prod-reco-foot,#fpickOverlay .fpick-foot) { padding:10px 12px max(10px,env(safe-area-inset-bottom)); }
 #fpickOverlay .fpick-stat { flex:1 0 100%; }
 :is(#prodRecoOverlay .drawer-btn,#fpickOverlay .fpick-cancel,#fpickOverlay .fpick-save) { min-width:0; flex:1; }
}
@media(max-width:360px) {
 #prodRecoOverlay .prod-reco-search-field,#fpickOverlay .selection-search-field { flex-basis:100%; }
 #prodRecoOverlay .prod-reco-add-btn { width:100%; }
 #fpickOverlay .fpick-toggle { padding-inline:12px; }
 #fpickOverlay .selection-search-field { flex-basis:0; padding-inline:12px; }
 :is(#prodRecoOverlay,#fpickOverlay) .selection-dialog-icon { width:36px; height:36px; flex-basis:36px; border-radius:14px; }
}
@media(prefers-reduced-motion:reduce) { :is(#prodRecoOverlay,#fpickOverlay),:is(#prodRecoOverlay .prod-reco-modal,#fpickOverlay .fpick-modal) { animation:none; transition:none; } }