.shop-terms-modal[hidden] {
  display:none!important
}


.shop-terms-modal {
  position:fixed;
  z-index:1001;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(920px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
  background:#18212c;
  color:#f2f5f8;
  border:1px solid #536171;
  border-radius:14px;
  box-shadow:0 16px 60px #0009
}


.shop-terms-modal * {
  box-sizing:border-box
}

.st-shell {
  padding:20px
}

.st-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}

.st-head h2 {
  margin:0;
  font-size:1.5rem
}

.st-head button {
  font-size:1.8rem;
  line-height:1;
  min-width:44px;
  min-height:44px;
  border:1px solid #64748b;
  border-radius:8px;
  background:#263445;
  color:inherit;
  cursor:pointer
}


.st-controls {
  margin:18px 0
}

.st-controls label,.st-controls>p {
  display:block;
  font-weight:650;
  margin:0 0 8px
}

.st-controls input {
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #718096;
  background:#fff;
  color:#18212c;
  font:inherit
}

.st-controls>p {
  margin-top:16px
}

.st-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.st-filter {
  min-height:42px;
  padding:8px 14px;
  border:1px solid #748397;
  border-radius:8px;
  background:#283748;
  color:#f4f7fb;
  font:inherit;
  cursor:pointer
}

.st-filter.active {
  background:#f4bf49;
  color:#17202a;
  border-color:#f4bf49;
  font-weight:750
}

.st-status {
  margin-top:14px;
  color:#c9d3df;
  font-size:.9rem
}


.st-category {
  margin:20px 0
}

.st-category h3 {
  font-size:1.15rem;
  border-bottom:1px solid #526071;
  padding-bottom:8px
}

.st-term {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid #374555
}

.st-media {
  min-height:120px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:#344252;
  color:#d1d9e3;
  text-align:center;
  font-size:.85rem;
  padding:8px
}

.st-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff
}

.st-term h4 {
  margin:0 0 7px;
  font-size:1.1rem
}

.st-term p {
  margin:0 0 10px;
  line-height:1.5
}

.st-term small {
  color:#f4bf49
}

.st-filter:focus-visible,.st-head button:focus-visible,.st-controls input:focus-visible {
  outline:3px solid #f4bf49;
  outline-offset:2px
}


@media(max-width:540px) {
  .shop-terms-modal {
    width:100vw;
    max-height:100dvh;
    height:100dvh;
    border-radius:0
  }

  .st-shell {
    padding:14px
  }

  .st-term {
    grid-template-columns:1fr;
    gap:10px
  }

  .st-media {
    height:180px
  }

  .st-filter {
    flex:1 1 auto
  }


}