/* ============================================================
   EXPLORE PAGE - redesigned search hero + custom filter dropdowns.
   Serve CARD (ed-card via serve-card-sdx.css) is UNCHANGED.
   Loads AFTER seller-dash.css (.sdx base) + serve-card-sdx.css +
   public-sdx.css. JS hooks preserved (data-explore-* + data-fb-*).
   Custom dropdowns rendered by fp-select.js (drives hidden selects).
   ============================================================ */

/* ---- hero band ---- */
body.fp-ed .sdx .elx-hero{position:relative;overflow:hidden;padding:56px 0 46px;margin:0;background:radial-gradient(760px 400px at 84% -30%,rgba(59,110,246,.18) 0%,rgba(59,110,246,0) 60%),radial-gradient(560px 360px at 8% -10%,rgba(99,152,255,.14) 0%,rgba(99,152,255,0) 62%),linear-gradient(150deg,#fff 0%,#f4f8ff 100%);border-bottom:1px solid var(--sdx-line-soft,#eef1f7)}
body.fp-ed .sdx .elx-hero-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body.fp-ed .sdx .elx-orb{position:absolute;border-radius:50%;filter:blur(10px)}
body.fp-ed .sdx .elx-orb-1{width:260px;height:260px;top:-110px;right:9%;background:radial-gradient(circle at 30% 30%,rgba(99,152,255,.24),rgba(99,152,255,0) 70%)}
body.fp-ed .sdx .elx-orb-2{width:200px;height:200px;bottom:-90px;left:12%;background:radial-gradient(circle at 40% 40%,rgba(59,110,246,.16),rgba(59,110,246,0) 70%)}
body.fp-ed .sdx .elx-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(36,86,230,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(36,86,230,.045) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(560px 320px at 80% 0%,#000 0%,transparent 74%);mask-image:radial-gradient(560px 320px at 80% 0%,#000 0%,transparent 74%)}
body.fp-ed .sdx .elx-hero-in{position:relative;z-index:1;text-align:center;max-width:720px;margin-inline:auto;animation:elxRise .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes elxRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.fp-ed .sdx .elx-hero-in{animation:none}}
body.fp-ed .sdx .elx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sdx-brand-600);background:var(--sdx-brand-50);border:1px solid var(--sdx-brand-100);border-radius:20px;padding:6px 14px;margin:0 0 18px}
body.fp-ed .sdx .elx-hero [data-explore-title]{font-family:'Inter',sans-serif;font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.04em;color:var(--sdx-ink-900);line-height:1.05;margin:0}
body.fp-ed .sdx .elx-hero .elx-sub,body.fp-ed .sdx .elx-hero [data-explore-count]{display:block;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:500;color:var(--sdx-ink-500);line-height:1.55;margin:14px auto 0;max-width:56ch;min-height:20px}
body.fp-ed .sdx .elx-hero [data-explore-count] b{color:var(--sdx-ink-800);font-weight:800}

/* hero search (reuse ed-searchbar markup, center + enlarge) */
body.fp-ed .sdx .elx-hero .ed-searchbar{margin:26px auto 0;max-width:600px;border-radius:16px;box-shadow:0 18px 40px -22px rgba(16,24,40,.3),var(--sdx-shadow-card)}

/* ---- body / filterbar ---- */
body.fp-ed .sdx .elx-body{padding:0 0 90px}
body.fp-ed .sdx .elx-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:26px 0 0}
body.fp-ed .sdx .elx-count{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--sdx-ink-500);margin:18px 0 0}
body.fp-ed .sdx .elx-count b{color:var(--sdx-ink-900);font-weight:800}
body.fp-ed .sdx .elx-body .ed-grid{margin-top:16px}
/* clear-all button */
body.fp-ed .sdx .elx-fb-clear{height:42px;padding:0 15px;border:1px dashed var(--sdx-line);border-radius:11px;background:transparent;color:var(--sdx-ink-500);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
body.fp-ed .sdx .elx-fb-clear:hover{border-color:#f6cccc;color:#b42318;background:var(--sdx-red-50)}
body.fp-ed .sdx .elx-fb-clear[hidden]{display:none!important}

/* ---- custom dropdowns (rendered by fp-select.js) ---- */
body.fp-ed .sdx select.fp-native-hidden{display:none!important}
body.fp-ed .sdx .fp-fdrop-wrap{position:relative}
body.fp-ed .sdx .fp-fdrop{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 12px 0 15px;border:1px solid var(--sdx-line);border-radius:11px;background:var(--sdx-surface);color:var(--sdx-ink-700);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
body.fp-ed .sdx .fp-fdrop:hover{border-color:var(--sdx-brand-300);color:var(--sdx-brand-600)}
body.fp-ed .sdx .fp-fdrop.is-open{border-color:var(--sdx-brand-400);color:var(--sdx-brand-700);box-shadow:0 0 0 3.5px var(--sdx-brand-50)}
body.fp-ed .sdx .fp-fdrop.is-set{background:var(--sdx-brand-50);border-color:var(--sdx-brand-200);color:var(--sdx-brand-700);font-weight:700}
body.fp-ed .sdx .fp-fchev{width:15px;height:15px;flex:none;color:var(--sdx-ink-400);transition:transform .2s}
body.fp-ed .sdx .fp-fdrop.is-open .fp-fchev{transform:rotate(180deg);color:var(--sdx-brand-500)}
body.fp-ed .sdx .fp-fdrop.is-set .fp-fchev{color:var(--sdx-brand-500)}
/* panel (scrollable) - display:none when closed so it never adds page overflow */
@keyframes fpPanelIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
body.fp-ed .sdx .fp-fpanel{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:210px;max-width:290px;max-height:300px;overflow-y:auto;background:var(--sdx-surface);border:1px solid var(--sdx-line);border-radius:14px;box-shadow:0 24px 50px -18px rgba(16,24,40,.32),0 4px 14px -8px rgba(16,24,40,.16);padding:6px;transform-origin:top left;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
body.fp-ed .sdx .fp-fpanel.is-open{display:block;animation:fpPanelIn .16s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){body.fp-ed .sdx .fp-fpanel.is-open{animation:none}}
body.fp-ed .sdx .fp-fopt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;min-height:40px;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:var(--sdx-ink-700);font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;transition:.12s}
body.fp-ed .sdx .fp-fopt > span{display:inline-flex;align-items:center;min-width:0}
body.fp-ed .sdx .fp-fopt:hover{background:var(--sdx-surface-2);color:var(--sdx-ink-900)}
body.fp-ed .sdx .fp-fopt.is-active{background:var(--sdx-brand-50);color:var(--sdx-brand-700);font-weight:700}
body.fp-ed .sdx .fp-fcheck{width:16px;height:16px;flex:none;color:var(--sdx-brand-600)}
/* panel scrollbar */
body.fp-ed .sdx .fp-fpanel{scrollbar-width:thin;scrollbar-color:var(--sdx-line) transparent}
body.fp-ed .sdx .fp-fpanel::-webkit-scrollbar{width:9px}
body.fp-ed .sdx .fp-fpanel::-webkit-scrollbar-track{background:transparent}
body.fp-ed .sdx .fp-fpanel::-webkit-scrollbar-thumb{background:var(--sdx-line);border-radius:8px;border:2.5px solid var(--sdx-surface)}
body.fp-ed .sdx .fp-fpanel::-webkit-scrollbar-thumb:hover{background:var(--sdx-ink-300,#c4cad6)}

@media (max-width:760px){
  body.fp-ed .sdx .elx-hero{padding:40px 0 34px}
  body.fp-ed .sdx .elx-filterbar{position:relative}
  body.fp-ed .sdx .fp-fdrop-wrap{position:static}
  body.fp-ed .sdx .fp-fpanel{left:0;right:0;width:auto;min-width:0;max-width:none}
}


/* PINNED mode - fp-select adds .is-pinned and inline left/top when the trigger sits inside an
   ancestor that clips (an admin modal card is overflow:hidden, its inner overflow:auto). An
   absolutely positioned panel is cut off there no matter the z-index; only taking it out of flow
   escapes. The component supplies the coordinates, so this rule must NOT set left/top itself. */
body.fp-ed .sdx .fp-fpanel.is-pinned {
  position: fixed;
  right: auto;
  bottom: auto;
  max-height: min(300px, calc(100vh - 24px));
  z-index: 1000;
}