/* Responsive Extensions directory — applies to both initial HTML and SPA. */
body.public-site .extension-directory {
  --extension-ink: #142c35;
  --extension-soft: #f3f8f6;
  --extension-border: #dfe9e5;
  min-width: 0;
  padding: clamp(12px,1.6vw,24px) 0 42px;
  color: var(--extension-ink);
}
body.public-site .extension-directory .extension-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: clamp(22px,3vw,40px);
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid #d7e7df;
  border-radius: 20px;
  background: linear-gradient(112deg,#edf8f1 0%,#f7fbf9 55%,#ebf4fc 100%);
}
body.public-site .extension-directory .extension-heading::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  top: -145px;
  right: 14%;
  border: 1px solid #d3e6dd;
  border-radius: 50%;
  pointer-events: none;
}
body.public-site .extension-directory .extension-heading > div {
  min-width: 0;
  max-width: 720px;
  position: relative;
  z-index: 1;
}
body.public-site .extension-directory .extension-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: #28755c;
  letter-spacing: .13em;
  font-size: 11px;
  font-weight: 800;
}
body.public-site .extension-directory .extension-heading .catalog-heading {
  margin: 0 0 8px;
  color: var(--extension-ink);
  font: 750 clamp(27px,3.1vw,42px)/1.18 system-ui,sans-serif;
  letter-spacing: -.045em;
}
body.public-site .extension-directory .extension-heading p {
  max-width: 58ch;
  margin: 0;
  color: #547269;
  font-size: clamp(13px,1.2vw,15px);
  line-height: 1.65;
}
body.public-site .extension-directory .extension-suggest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 43px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid #b6d9ca;
  background: white;
  color: #186f53;
  box-shadow: 0 4px 12px #164c3420;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
  position: relative;
  z-index: 1;
}
body.public-site .extension-directory .extension-suggest:hover {
  background: #e7f7ee;
  border-color: #62ad90;
  text-decoration: none;
}
body.public-site .extension-directory .catalog-layout {
  width: 100%;
  margin: 0;
  min-width: 0;
}
body.public-site .extension-directory .extension-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  overflow: visible;
  margin: 0 0 17px;
  padding: 0;
}
body.public-site .extension-directory .extension-category {
  min-height: 41px;
  padding: 9px 13px;
  border-radius: 10px;
  color: #53675e;
  background: white;
  font-size: 12px;
  white-space: normal;
  text-align: center;
}
body.public-site .extension-directory .extension-category.active {
  border-color: #137a58;
  color: white;
  background: #137a58;
  box-shadow: 0 5px 12px #14775924;
}
body.public-site .extension-directory .extension-toolbar {
  grid-template-columns: minmax(0,1fr) minmax(155px,210px) minmax(150px,185px);
  gap: 15px;
  margin-bottom: 13px;
  padding: 17px;
  border-radius: 14px;
  border: 1px solid var(--extension-border);
  background: #fff;
  box-shadow: 0 3px 14px #1b49300b;
}
body.public-site .extension-server-directory .extension-toolbar {
  grid-template-columns: minmax(0,1fr) minmax(155px,210px);
}
body.public-site .extension-directory .extension-search {
  min-width: 0;
  margin: 0;
  border-color: #d9e4e0;
  border-radius: 10px;
  background: #f9fbfa;
}
body.public-site .extension-directory .extension-search input {
  min-width: 0;
  font-size: 14px;
}
body.public-site .extension-directory .extension-search button {
  min-height: 36px;
  border-radius: 7px;
  background: #137a58;
}
body.public-site .extension-directory .extension-control select {
  border-radius: 10px;
  border-color: #d9e4e0;
  color: var(--extension-ink);
  background: #f9fbfa;
}
body.public-site .extension-directory .extension-results {
  margin: 8px 0 15px;
  border-bottom: 1px solid var(--extension-border);
  padding-bottom: 11px;
}
body.public-site .extension-directory .catalog-results-count {
  color: #58716a;
  font-weight: 650;
  font-size: 13px;
}
body.public-site .extension-directory .catalog-group {
  margin: 0 0 30px;
  min-width: 0;
  scroll-margin-top: 65px;
}
body.public-site .extension-directory .catalog-group-title {
  margin: 0 0 15px;
  gap: 10px;
  padding: 6px 0;
  font: 750 clamp(17px,1.5vw,21px)/1.4 system-ui,sans-serif;
  letter-spacing: -.02em;
  color: #173a33;
}
body.public-site .extension-directory .catalog-group-count {
  padding: 2px 9px;
  background: #e8f4ee;
  color: #187558;
  border-radius: 20px;
  font-weight: 700;
  font-size: 11px;
}
body.public-site .extension-directory .catalog-website-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,285px),1fr));
  align-items: stretch;
  gap: 17px;
  min-width: 0;
}
body.public-site .extension-directory .extension-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 222px;
  margin: 0;
  padding: 19px;
  border: 1px solid var(--extension-border);
  border-radius: 14px;
  background: white;
  box-shadow: 0 3px 13px #244b3c0b;
  transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
body.public-site .extension-directory .extension-card:hover {
  border-color: #86c2aa;
  box-shadow: 0 12px 27px #244b3c17;
  transform: translateY(-3px);
}
body.public-site .extension-directory .extension-card-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 13px;
}
body.public-site .extension-directory .catalog-website-name {
  margin: 0;
  min-width: 0;
  font: 750 14px/1.45 system-ui,sans-serif;
  letter-spacing: -.01em;
}
body.public-site .extension-directory .catalog-website-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--extension-ink);
}
body.public-site .extension-directory .catalog-website-link > :is(img,.catalog-picture-favicon) {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  border-radius: 11px;
  padding: 4px;
  object-fit: contain;
  background: #f2f8f5;
  border: 1px solid #e5eeea;
}
body.public-site .extension-directory .catalog-website-link .catalog-picture-favicon img {
  width: 100%;
  height: 100%;
  padding: 0;
}
body.public-site .extension-directory .catalog-website-link span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
body.public-site .extension-directory .catalog-bookmark {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
}
body.public-site .extension-directory .extension-description,
body.public-site .extension-directory .extension-card > p {
  flex: 1 1 auto;
  margin: 0 0 15px;
  color: #58706a;
  font: 400 12.5px/1.7 system-ui,sans-serif;
  overflow-wrap: anywhere;
}
body.public-site .extension-directory .extension-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #edf1ef;
}
body.public-site .extension-directory .extension-browsers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
body.public-site .extension-directory .extension-browsers > span {
  border: 1px solid #d9e8df;
  background: #f0f8f4;
  border-radius: 6px;
  color: #277357;
  font-size: 10px;
  font-weight: 650;
}
body.public-site .extension-directory .extension-details-link {
  flex: none;
  color: #137a58;
  min-height: 32px;
  font-weight: 750;
  font-size: 12px;
}
body.public-site .extension-directory :is(a,button,input,select):focus-visible {
  outline: 3px solid #66c9a3;
  outline-offset: 2px;
}
@media(max-width:860px) {
  body.public-site .extension-directory .extension-toolbar {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  body.public-site .extension-directory .extension-search {
    grid-column: 1/-1;
  }
  body.public-site .extension-directory .catalog-website-grid {
    grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr));
  }
}
@media(max-width:600px) {
  body.public-site .extension-directory .extension-heading {
    padding: 22px 18px;
    border-radius: 14px;
    align-items: flex-start;
    gap: 15px;
  }
  body.public-site .extension-directory .extension-suggest {
    display: inline-flex;
    padding: 9px 12px;
  }
  body.public-site .extension-directory .extension-categories {
    flex-wrap: nowrap;
    max-width: 100%;
    gap: 7px;
    overflow-x: auto;
    padding: 0 0 10px;
    scrollbar-width: thin;
  }
  body.public-site .extension-directory .extension-category {
    flex: 0 0 auto;
    min-height: 43px;
    white-space: nowrap;
    padding: 9px 11px;
  }
  body.public-site .extension-directory .extension-toolbar {
    grid-template-columns: minmax(0,1fr);
    padding: 12px;
    gap: 11px;
  }
  body.public-site .extension-directory .extension-search {
    grid-column: auto;
  }
  body.public-site .extension-directory .extension-card {
    min-height: 0;
    padding: 17px;
  }
}
@media(prefers-reduced-motion:reduce) {
  body.public-site .extension-directory :is(.extension-card,.extension-category) {
    transition: none;
  }
  body.public-site .extension-directory .extension-card:hover {
    transform: none;
  }
}