/* RCL store locator. Colours/fonts follow the Webflow theme (Oswald buttons, Roboto body, slate palette). */
.rcl-locator {
  --rcl-slate: #2b3a4c;
  --rcl-grey: #8f9ba5;
  --rcl-line: #d5dfe7;
  --rcl-text: #555;
  max-width: 1170px;
  margin: 20px auto 60px;
  padding: 0 16px;
  font-family: Roboto, sans-serif;
  color: var(--rcl-text);
  text-align: left;
}
.rcl-locator__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rcl-locator__search { display: flex; gap: 8px; flex-wrap: wrap; }
.rcl-locator__search input {
  flex: 1 1 260px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rcl-line);
  border-radius: 4px;
  font: 16px Roboto, sans-serif;
  color: var(--rcl-slate);
}
.rcl-locator__search input:focus { outline: 2px solid var(--rcl-grey); outline-offset: 1px; }
.rcl-locator__btn {
  height: 44px;
  padding: 0 22px;
  border: 2px solid var(--rcl-slate);
  border-radius: 4px;
  background: var(--rcl-slate);
  color: #fff;
  font: 13px/1 Oswald, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.rcl-locator__btn:hover { background: var(--rcl-grey); border-color: var(--rcl-grey); }
.rcl-locator__btn--ghost { background: #fff; color: var(--rcl-slate); }
.rcl-locator__btn--ghost:hover { color: #fff; }
.rcl-locator__status { margin: 12px 0; min-height: 20px; font-size: 14px; }
.rcl-locator__body {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: 600px;
  border: 1px solid var(--rcl-line);
  border-radius: 4px;
  overflow: hidden;
}
.rcl-locator__list { margin: 0; padding: 0; list-style: none; overflow-y: auto; border-right: 1px solid var(--rcl-line); }
.rcl-locator__item { padding: 14px 16px; border-bottom: 1px solid var(--rcl-line); cursor: pointer; }
.rcl-locator__item:hover, .rcl-locator__item.is-active { background: #f4f7f9; }
.rcl-locator__item.is-active { box-shadow: inset 4px 0 0 var(--rcl-slate); }
.rcl-locator__name {
  margin: 0 0 4px;
  font: 500 16px/1.3 Oswald, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--rcl-slate);
}
.rcl-locator__addr { margin: 0; font-size: 14px; line-height: 1.45; }
.rcl-locator__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 13px; }
.rcl-locator__meta a { color: var(--rcl-slate); font-weight: 500; text-decoration: underline; }
.rcl-locator__dist { color: var(--rcl-grey); }
.rcl-locator__map { width: 100%; height: 100%; z-index: 0; }
.rcl-locator .leaflet-popup-content { font-family: Roboto, sans-serif; }
.rcl-locator .leaflet-popup-content strong { font-family: Oswald, sans-serif; text-transform: uppercase; color: var(--rcl-slate); }
.rcl-locator .marker-cluster-small, .rcl-locator .marker-cluster-medium, .rcl-locator .marker-cluster-large { background: rgba(43, 58, 76, .25); }
.rcl-locator .marker-cluster-small div, .rcl-locator .marker-cluster-medium div, .rcl-locator .marker-cluster-large div {
  background: var(--rcl-slate);
  color: #fff;
  font-family: Oswald, sans-serif;
}

@media (max-width: 767px) {
  .rcl-locator__body { grid-template-columns: 1fr; grid-template-rows: 320px auto; height: auto; }
  .rcl-locator__list { order: 2; max-height: 420px; border-right: 0; border-top: 1px solid var(--rcl-line); }
  .rcl-locator__map { order: 1; }
  .rcl-locator__btn { flex: 1 1 auto; }
}