/* ================================
   9. DISTRIBUTORS (sx.distributor)
   ================================ */

.sx-distributor{
  --sx-brand: rgb(45 132 205);
  --sx-text: rgb(18 22 18);
  --sx-muted: rgba(18, 22, 18, .72);

  --sx-border: rgba(45, 132, 205, .18);
  --sx-soft: rgba(45, 132, 205, .08);

  --sx-bg: #fff;
  --sx-radius: 12px;
  --sx-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.sx-distributor .sx-dist{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 16px 40px;
  color: var(--sx-text);
}

/* Intro */
.sx-distributor .sx-dist__intro{
  margin-bottom: 18px;
}

.sx-distributor .sx-dist__intro--split{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--sx-border);
  background: var(--sx-bg);
  border-radius: var(--sx-radius);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.sx-distributor .sx-dist__introRight{
  justify-self: end;
  width: 100%;
  max-width: 460px;
}

.sx-distributor .sx-dist__map{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--sx-soft);
}

.sx-distributor .sx-dist__title{
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}

.sx-distributor .sx-dist__lead{
  margin: 0 0 10px;
  color: var(--sx-muted);
  max-width: 78ch;
}

.sx-distributor .sx-dist__note{
  margin: 0;
  color: var(--sx-muted);
  font-size: 13.5px;
}

.sx-distributor .sx-dist__inlineLink{
  color: var(--sx-brand);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid var(--sx-brand);
}

.sx-distributor .sx-dist__inlineLink:hover{
  text-decoration: none;
  border-bottom-color: var(--sx-brand);
}

/* Filter bar */
.sx-distributor .sx-dist__filter{
  margin: 18px 0 10px;
  padding: 14px;
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius);
  background: var(--sx-bg);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}

.sx-distributor .sx-dist__field{ min-width: 220px; }

.sx-distributor .sx-dist__field--grow{
  flex: 1 1 320px;
  min-width: 260px;
}

.sx-distributor .sx-dist__label{
  display: block;
  font-size: 12px;
  color: var(--sx-muted);
  margin: 0 0 6px;
}

.sx-distributor .sx-dist__select,
.sx-distributor .sx-dist__input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 10px;
  background: #fff;
  color: var(--sx-text);
  outline: none;
}

.sx-distributor .sx-dist__select:focus,
.sx-distributor .sx-dist__input:focus{
  border-color: var(--sx-brand);
  box-shadow: 0 0 0 3px rgba(45, 132, 205, .25);
}

.sx-distributor .sx-dist__reset{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  cursor: pointer;
}

.sx-distributor .sx-dist__reset:hover{ border-color: var(--sx-brand); }

/* Meta / no results */
.sx-distributor .sx-dist__meta{
  margin: 6px 0 18px;
  color: var(--sx-muted);
  font-size: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.sx-distributor .sx-dist__noResults a{
  color: var(--sx-brand);
  font-weight: 600;
  text-decoration: none;
}

.sx-distributor .sx-dist__noResults a:hover{ text-decoration: underline; }

/* Sections */
.sx-distributor .sx-dist__section{ margin: 22px 0 26px; }

.sx-distributor .sx-dist__h2{
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sx-distributor .sx-dist__h2::after{
  content: "";
  height: 1px;
  flex: 1;
  background: var(--sx-border);
}

/* Cards */
.sx-distributor .sx-dist__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.sx-distributor .sx-card{
  grid-column: span 4;
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius);
  background: #fff;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
}

.sx-distributor .sx-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--sx-radius) 0 0 var(--sx-radius);
  background: rgba(45, 132, 205,.2);
  opacity: 0;
  transition: opacity .15s ease;
}

.sx-distributor .sx-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--sx-shadow);
  border-color: var(--sx-brand);
}

.sx-distributor .sx-card:hover::before{ opacity: 1; }

.sx-distributor .sx-card__title{
  margin: 0 0 6px;
  font-size: 16px;
}

.sx-distributor .sx-card__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.sx-distributor .sx-card__topText{ min-width: 0; }

.sx-distributor .sx-card__name{
  margin: 0 0 6px;
  font-weight: 650;
}

.sx-distributor .sx-card__text{
  margin: 0;
  color: var(--sx-muted);
  font-size: 13px;
}

.sx-distributor .sx-card__logo{
  width: 92px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: .92;
  filter: grayscale(10%);
}

/* Contact list */
.sx-distributor .sx-card__contact{
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(0,0,0,.08);
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--sx-text);
}

.sx-distributor .sx-card__contact li{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: baseline;
}

.sx-distributor .sx-card__contact span{
  color: var(--sx-muted);
  font-size: 12px;
}

.sx-distributor .sx-card__contact a{
  color: var(--sx-brand);
  text-decoration: none;
  word-break: break-word;
}

.sx-distributor .sx-card__contact a:hover{ text-decoration: underline; }

.sx-distributor .sx-card__address{ align-items: start; }

.sx-distributor .sx-card__address div{
  line-height: 1.35;
  color: var(--sx-text);
}

/* Responsive */
@media (max-width: 980px){
  .sx-distributor .sx-card{ grid-column: span 6; }
  .sx-distributor .sx-dist__intro--split{ grid-template-columns: 1fr; }
  .sx-distributor .sx-dist__introRight{ justify-self: start; max-width: 560px; }
}

@media (max-width: 620px){
  .sx-distributor .sx-card{ grid-column: span 12; }
  .sx-distributor .sx-dist__filter{ padding: 12px; }
  .sx-distributor .sx-card__contact li{ grid-template-columns: 62px 1fr; }
  .sx-distributor .sx-card__top{
    flex-direction: column;
    align-items: flex-start;
  }
}