/* Phantomexposure catalogue strip — shared across product pages.
   Independent Effects / Instruments dropdowns (matches the main site nav).
   Self-contained: no dependency on site.css variables. nav.js adds
   tap-to-open (.is-open); CSS hover/focus covers desktop + keyboard. */

.pe-site-strip{
  position:sticky;
  top:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:44px;
  padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
  background:rgba(4,9,10,.86);
  border-bottom:1px solid rgba(169,243,230,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#edf4ff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;
  line-height:1;
}
.pe-site-strip a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.pe-site-strip__brand{font-weight:800;letter-spacing:-.01em;opacity:.92}
.pe-site-strip__brand:hover{opacity:1}

/* Pill holding the two triggers */
.pe-products{
  position:relative;
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

/* Each trigger + its own panel = a self-contained unit */
.pe-product{position:relative}

.pe-trigger{
  appearance:none;
  border:0;
  background:transparent;
  color:#aebbd0;
  font:inherit;
  font-size:13px;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,color .18s ease;
}
.pe-trigger:hover,
.pe-trigger:focus-visible,
.pe-product:hover .pe-trigger,
.pe-product:focus-within .pe-trigger,
.pe-product.is-open .pe-trigger{
  color:#f3faf8;
  background:rgba(255,255,255,.07);
}

/* Dropdown panel — anchored under its OWN trigger */
.pe-panel{
  position:absolute;
  top:100%;
  left:0;
  z-index:50;
  min-width:300px;
  padding-top:10px;            /* transparent hover bridge */
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  /* Instant reveal: no transition, so the menu can never be starved by a
     page's heavy background animation (e.g. Fluorotype). Snappy + bulletproof. */
}
/* Rightmost menu opens leftwards so it never runs off-screen */
.pe-product:last-child .pe-panel{left:auto;right:0}

.pe-panel-card{
  display:grid;
  gap:5px;
  padding:10px;
  border-radius:18px;
  background:rgba(5,12,13,.98);
  border:1px solid rgba(169,243,230,.16);
  box-shadow:0 24px 70px rgba(0,0,0,.44);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.pe-panel-label{
  display:block;
  color:#a8f4e6;
  font-size:10px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:7px 9px 2px;
}
.pe-panel a{
  display:grid;
  gap:3px;
  min-height:50px;
  align-content:center;
  padding:10px;
  border-radius:13px;
  opacity:.92;
  transition:background .18s ease,transform .18s ease,opacity .18s ease;
}
.pe-panel a:hover,
.pe-panel a:focus-visible{
  background:rgba(255,255,255,.06);
  transform:translateX(2px);
  opacity:1;
}
.pe-panel strong{color:#f4fbf7;font-size:13px}
.pe-panel em{color:#93aaa3;font-style:normal;font-size:11px;line-height:1.25}

/* Open only the hovered / focused / tapped product's own panel */
.pe-product:hover .pe-panel,
.pe-product:focus-within .pe-panel,
.pe-product.is-open .pe-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

@media(max-width:640px){
  .pe-product{position:static}   /* anchor panels to the pill (screen-right), not each trigger */
  .pe-panel{
    left:auto;
    right:0;
    top:100%;
    min-width:min(290px,calc(100vw - 24px));
  }
  /* backdrop blur is costly on mobile Safari — solid bar instead */
  .pe-site-strip{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(4,9,10,.94);
  }
}