.pb-supersearch { 
  position: relative; 
}
.pb-ss-toggle { background:none; border:0; cursor:pointer; padding:.5rem; }
.pb-ss-panel {
  position:absolute; 
  top:100%; 
  right:0; 
  width:min(720px,95vw);
  background: var(--supersearch-panel-colour); 
  color: var(--postcard-block-font-col);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  border-radius: var(--postcard-border-radius); 
  padding: calc(var(--unit) * .5);
  /*padding-bottom: calc(var(--unit) * .25);*/
  transform-origin: top right; transition: transform .18s ease, opacity .18s ease;
  z-index: 10;
}
.pb-ss-panel[hidden]{ display:block; opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; visibility:hidden; }

.pb-ss-panel.pb-ss-sticky {
  background: transparent;
  box-shadow: none;
  border: none;
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 0;
  input {
    margin-bottom: 0;
    height: auto;
  }
}

.pb-ss-input-row{ display:flex; gap:8px; }
.pb-ss-input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid #ddd; }
.pb-ss-submit{ cursor:pointer; }

.pb-ss-scopes{ 
  display: flex; 
  flex-flow: row wrap;
  gap: 5px calc(var(--unit) *.5);
  margin:10px 0 0; 

  p {
    margin: 0;
    display: grid;
    place-content: center;
    font-size: var(--s6);
    font-family: var(--font-fam-body);
  }
  label {
    display: flex;
    color: inherit;
    font-size: var(--s6);
    font-family: var(--font-fam-body);
    input {
      margin: 0 1ex 0 0;
    }
  }
}
.pb-ss-scopes input{ margin-right:6px; }
.pb-ss-scopes input:focus-visible{ outline:2px solid var(--clr-interactive); outline-offset:2px; }
.pb-ss-scopes[hidden]{ display:block; opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; visibility:hidden; }

/* Advanced filters */
.pb-ss-advanced-row {
  margin-top: calc(var(--unit) * .5);
}

.pb-ss-advanced {
  margin-top: calc(var(--unit) * .5);
}

.pb-ss-advanced-group {
  display: flex;
  flex-flow: row wrap;
  gap: 5px calc(var(--unit) *.5);
  color: inherit;
  background: var(--body-background-colour);
  padding: 1rem;
  border-radius: var(--postcard-border-radius);

  [type=checkbox] {
    margin-bottom: 0;
    transform: translateY(1px);
  }
  legend {
    margin-bottom: 1rem;
    color: inherit;
    position: relative;
    top: 1.35rem;
    padding: 0;
    display: block;
  }
  label {
    color: inherit;
    font-family: var(--font-fam-body);
  }
}

.pb-ss-advanced-group + .pb-ss-advanced-group {
  margin-top: calc(var(--unit) * .25);
}

.pb-details {
  margin-top: calc(var(--unit) * .5);
  padding-top: calc(var(--unit) * .5);
  border-top: 1px solid var(--clr-interactive);
}
.pb-details summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
  font-family: var(--font-fam-headings);
}
.pb-details summary::-webkit-details-marker{ display:none; }
.pb-details .arrow{ 
  transition:transform .18s ease; 
  color: var(--clr-interactive);
  transform: translateY(1px);
}
.pb-details[open] .arrow{ transform:rotate(90deg) translateY(1px); }
.pb-details summary:focus-visible{ outline:2px solid var(--clr-interactive); outline-offset:2px; border-radius:0rem; }
.pb-details .content{ margin-top:.5rem; }
.pb-details[hidden]{ display:block; opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; visibility:hidden; }

.pb-ss-results { 
  margin-top:8px; 
  max-height:70vh; 
  overflow:auto; 
  padding-right: 1rem;
  &::-webkit-scrollbar {
      width: 1rem;
    }
    & {
      scrollbar-width: thin;
      scrollbar-color: var(--button-cta-bg-colour) transparent;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--button-cta-bg-colour) ;
      border-radius: 2rem;
    }

  .cardinfo .description {
    width: 100%;
  }
}
.pb-search-heading { 
  /*font-size:1rem; */
  margin: var(--heading-margin-top) 0 var(--heading-margin-bottom);
  font-weight: var(--font-weight-card-heading);
}
.pb-search-subheading { 
  font-weight: var(--font-weight-card-heading);
  margin: calc(var(--heading-margin-top) * 2) 0 calc(var(--heading-margin-bottom) * 2);
}
.pb-search-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); 
  gap: calc(var(--postcard-grid-gap) * .5); 
}

.pb-search-grid.layout--rows{ 
  grid-template-columns:1fr;
}

.pb-search-grid + .pb-search-grid,
.pb-search-grid + .pb-search-section {
  margin-top: calc(var(--postcard-grid-gap) * .5);
}

.pb-search-loading, .pb-search-empty, .pb-search-error, .pb-search-none {
  padding:12px; 
  color: var(--postcard-block-font-col); 
  background:transparent; 
  border: var(--supersearch-loading-border); 
  border-radius: var(--postcard-border-radius); 
  font-family: var(--font-fam-headings);
  margin-right: -1rem;
  /*margin-bottom: .75rem;*/
}

.pb-ss-showall-wrap { margin: 10px 0 4px; }
.pb-ss-showall.button { cursor: pointer; }


/* Desktop */

.pb-supersearch.desktop {
  display: flex;
  flex: 1;

  .pb-ss-toggle {
    margin-left: auto;
  }
  input[type="text"] {
    margin-bottom: 0;
    height: auto;
  }
}

.pb-ss-results {
  .postcard .cardinfo {
    background: var(--postcard-block-col-search);
    border-bottom: var(--postcard-border-bottom-search);
  }
}

/* Mobile */

.pb-supersearch.mobile {
  position: unset;
  margin-left: auto;

  .hidden-on-mobile {
    display: none;
  }

  input[type="text"] {
    margin-bottom: 0;
    height: auto;
  }

  .pb-ss-panel {
    width: 100%;
  }
}

/* Page header */

.pb-supersearch.page-header {
  display: grid;
  place-content: center;
  .pb-ss-panel {
    position: relative;
    top: 0;
  }
}

#onpage-search-results > .pb-search-section {
  grid-column-start: 1;
  grid-column-end: -1;
}

.members-list > .pb-search-section {
  .pb-search-heading {
    display: none;
  }
  .pb-search-subheading {
    display: none;
  }

  .pb-search-grid__packs {
    display: none;
  }

  .pb-ss-showall-wrap {
    display: none;
  }
}