/* ============================================================================
   Mission Meats Store Locator — v2 (parallel version)
   Hand-authored, mobile-first, Mission Meats branding.
   Class prefix: .sl2 (app/UI) and .mm2 (map markers/popups) so it never
   collides with v1's .sl / .mm classes.
   ============================================================================ */

/* Self-hosted brand fonts — the same WOFF2 files the Hydrogen storefront ships
   from /public/fonts (served at /fonts/*). Montserrat carries body/utility text;
   LEMON MILK carries display and label moments. Intro Rust is the brand display
   intent, but no valid WOFF2 source exists, so — exactly as the storefront's
   tailwind.css does — LEMON MILK fills the display role. Loading these here
   removes the third-party Google Fonts request the standalone page used before.
   Each @font-face descriptor necessarily names Montserrat, the brand body face,
   which the design-system detector reads as an "overused font"; that is an
   accepted, DESIGN.md-mandated choice, waived per-line below. */
@font-face {
  font-family: "Montserrat"; /* impeccable-disable-line overused-font -- DESIGN.md-mandated brand body face */
  src: url("/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat"; /* impeccable-disable-line overused-font -- DESIGN.md-mandated brand body face */
  src: url("/fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat"; /* impeccable-disable-line overused-font -- DESIGN.md-mandated brand body face */
  src: url("/fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LEMON MILK";
  src: url("/fonts/LEMONMILK-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.sl2 {
  /* Brand palette (matches v1 + sl_map_settings) */
  --mm-green: #1d8649;
  --mm-green-700: #157a3f;
  --mm-green-800: #0f5c30;
  --mm-green-50: #eaf6e1; /* lightest green surface: result badges, chip hover */
  --mm-lime: #93d500;
  --mm-amber: #fdce62;
  --mm-cream: #fff8e6;
  --mm-mint: #f6fbf3;

  /* Negative / closed state. A muted rust rather than DESIGN.md's alarmist error
     red (#CB2B2B) or warning orange (#ED8A00) — the latter would also clash with
     the brand amber used for focus/selection. Locator-local, used only here. */
  --mm-rust: #b4451f;
  --mm-rust-soft: rgba(180, 69, 31, 0.1);

  --ink: #18241d;
  --muted: #5d6b62;
  /* --faint darkened to #636e67 (~5.4:1 on white) to meet WCAG AA 1.4.3. */
  --faint: #636e67;
  --line: #e6ece8;
  --line-strong: #d3ddd6;
  --line-hover: #bcc9c1; /* darker neutral border for input hover */
  --surface: #ffffff;

  --radius: 15px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --panel-w: 420px;

  --shadow-sm: 0 1px 2px rgba(15, 69, 40, 0.06), 0 1px 3px rgba(15, 69, 40, 0.08);
  --shadow-md: 0 6px 18px rgba(15, 69, 40, 0.1);
  --shadow-lg: 0 14px 40px rgba(15, 69, 40, 0.16);
  --shadow-cluster: 0 3px 8px rgba(15, 69, 40, 0.3); /* map cluster marker lift */

  /* Montserrat = body/utility. LEMON MILK = display + labels (see @font-face). */
  --font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-display: "LEMON MILK", ui-sans-serif, system-ui, sans-serif;
  --font-label: "LEMON MILK", ui-sans-serif, system-ui, sans-serif;

  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  height: 100%;
  min-height: 0;
  background: var(--surface);
  overflow: hidden;
}

.sl2 *,
.sl2 *::before,
.sl2 *::after {
  box-sizing: border-box;
}

.sl2 button {
  font-family: inherit;
}

/* Visually hidden, still announced by screen readers. */
.sl2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Consistent, visible focus everywhere (brand amber). The outline follows each
   element's own border-radius, so no radius override is needed here. */
.sl2 :where(button, input, select, a, [tabindex]):focus-visible {
  outline: 2px solid var(--mm-amber);
  outline-offset: 2px;
}

/* ------------------------------- Panel -------------------------------- */
.sl2-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  position: relative;
  z-index: 2;
}

.sl2-head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(
      120% 140% at 0% 0%,
      rgba(147, 213, 0, 0.12),
      transparent 60%
    ),
    var(--surface);
}
.sl2-eyebrow {
  margin: 0;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-green);
}
.sl2-wordmark {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.08;
  color: var(--ink);
}
.sl2-wordmark::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 9px;
  border-radius: 4px;
  background: var(--mm-amber);
}
.sl2-tagline {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ------------------------------ Search -------------------------------- */
.sl2-search {
  display: flex;
  gap: 9px;
  padding: 14px 22px 8px;
}
.sl2-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.sl2-field__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  fill: var(--faint);
  pointer-events: none;
}
.sl2-field__input {
  width: 100%;
  height: 46px;
  padding: 0 38px 0 38px;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sl2-field__input::placeholder {
  color: var(--faint);
}
.sl2-field__input:hover {
  border-color: var(--line-hover);
}
.sl2-field__input:focus {
  outline: none;
  border-color: var(--mm-green);
  box-shadow: 0 0 0 3px rgba(29, 134, 73, 0.15);
}
.sl2-field__clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  border-radius: 50%;
}
.sl2-field__clear svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.sl2-field__clear:hover {
  background: var(--mm-mint);
  color: var(--ink);
}

/* Buttons */
.sl2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.05s ease;
}
.sl2-btn:active {
  transform: translateY(1px);
}
.sl2-btn--primary {
  background: var(--mm-green);
  color: #fff;
}
.sl2-btn--primary:hover {
  background: var(--mm-green-700);
}
.sl2-btn--ghost {
  background: #fff;
  color: var(--mm-green-800);
  border-color: var(--line-strong);
}
.sl2-btn--ghost:hover {
  border-color: var(--mm-green);
  background: var(--mm-mint);
}

/* Tools row: geolocate + example chips */
.sl2-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 22px 14px;
}
.sl2-geo {
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
}
.sl2-geo__icon {
  width: 15px;
  height: 15px;
  fill: var(--mm-green);
}
.sl2-geo[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}
.sl2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sl2-chip {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mm-green-800);
  background: var(--mm-mint);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sl2-chip:hover {
  background: var(--mm-green-50);
  border-color: var(--mm-lime);
}

/* Mobile view toggle (hidden on desktop) */
.sl2-viewtoggle {
  display: none;
  gap: 4px;
  margin: 0 22px 12px;
  padding: 4px;
  background: var(--mm-mint);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.sl2-viewtoggle__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.sl2-viewtoggle__btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.sl2-viewtoggle__btn.is-active {
  color: var(--mm-green-800);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* Status line */
.sl2-status {
  min-height: 20px;
  padding: 0 22px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.sl2-status:empty {
  display: none;
}
.sl2-status strong {
  color: var(--ink);
  font-weight: 700;
}
.sl2-map-note {
  display: none;
  margin: 0 22px 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--mm-green-800);
  background: var(--mm-mint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sl2[data-map="unavailable"] .sl2-map-note {
  display: block;
}

/* ------------------------------ Results ------------------------------- */
.sl2-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 16px;
  scrollbar-gutter: stable;
}
.sl2-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl2-result {
  list-style: none;
}

.sl2-card {
  position: relative;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  outline: none;
  transition: background 0.14s ease, box-shadow 0.14s ease;
}
/* The keyboard/AT-focusable control. Wraps name + address only, so the
   directions/phone/website links sit as siblings (no nested-interactive). */
.sl2-card__select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sl2-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  transition: background 0.14s ease;
}
.sl2-card:hover {
  background: var(--mm-mint);
}
.sl2-card.is-selected {
  background: var(--mm-cream);
}
.sl2-card.is-selected::before {
  background: var(--mm-amber);
}

.sl2-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sl2-card__name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.sl2-card__dist {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mm-green);
  white-space: nowrap;
}
.sl2-card__addr {
  display: block;
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.sl2-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.sl2-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mm-green-800);
  background: var(--mm-green-50);
  border-radius: var(--radius-pill);
}
.sl2-hours {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
}
.sl2-hours::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.sl2-hours--open {
  color: var(--mm-green);
  background: rgba(29, 134, 73, 0.1);
}
.sl2-hours--closed {
  color: var(--mm-rust);
  background: var(--mm-rust-soft);
}
.sl2-dirlink {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-green);
  text-decoration: none;
}
.sl2-dirlink:hover {
  color: var(--mm-green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sl2-card__detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
}
.sl2-detail__line {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.sl2-detail__line + .sl2-detail__line {
  margin-top: 4px;
}
.sl2-detail__meta {
  color: var(--faint);
  font-size: 12px;
}
.sl2-link {
  color: var(--mm-green);
  font-weight: 600;
  text-decoration: none;
}
.sl2-link:hover {
  color: var(--mm-lime);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Show more (pagination) */
.sl2-showmore-wrap {
  padding: 14px 22px 4px;
  text-align: center;
}
.sl2-showmore {
  width: 100%;
  height: 44px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mm-green-800);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sl2-showmore:hover {
  border-color: var(--mm-green);
  background: var(--mm-mint);
}
.sl2-showmore[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* Loading skeletons */
.sl2-skeleton {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.sl2-skeleton__line {
  height: 11px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    #eef2ef 0%,
    #f6f9f6 40%,
    #eef2ef 80%
  );
  background-size: 200% 100%;
  animation: sl2-shimmer 1.2s ease-in-out infinite;
}
.sl2-skeleton__line + .sl2-skeleton__line {
  margin-top: 9px;
}
.sl2-skeleton__line.w-40 { width: 40%; }
.sl2-skeleton__line.w-60 { width: 60%; }
.sl2-skeleton__line.w-80 { width: 80%; }
@keyframes sl2-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty / no-results / error states */
.sl2-empty {
  padding: 30px 26px 34px;
  text-align: center;
}
.sl2-empty__art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: var(--mm-green);
  background: var(--mm-mint);
}
.sl2-empty__art svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.sl2-empty--error .sl2-empty__art {
  color: var(--mm-rust);
  background: var(--mm-rust-soft);
}
.sl2-empty__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.sl2-empty__body {
  margin: 7px auto 0;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.sl2-empty__secondary {
  margin-top: 16px;
}
.sl2-empty__secondary button {
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-green-800);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sl2-empty__secondary button:hover {
  border-color: var(--mm-green);
  background: var(--mm-mint);
}

/* -------------------------------- Map --------------------------------- */
.sl2-mapwrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #e9eef0;
}
.sl2-map {
  position: absolute;
  inset: 0;
}
.sl2-recenter {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-green-800);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  backdrop-filter: saturate(1.2) blur(2px);
}
.sl2-recenter:hover {
  background: #fff;
  border-color: var(--mm-green);
}
.sl2-recenter svg {
  width: 15px;
  height: 15px;
  fill: var(--mm-green);
}
.sl2-backtolist {
  display: none; /* mobile only */
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 6;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--mm-green);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.sl2-backtolist svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Map markers (custom HTML) */
.mm2-marker {
  cursor: pointer;
  will-change: transform;
}
.mm2-pin {
  position: relative;
  width: 30px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
}
.mm2-pin svg {
  display: block;
  width: 30px;
  height: 38px;
  filter: drop-shadow(0 3px 4px rgba(15, 69, 40, 0.32));
  /* Scale effects live on the inner svg, never on the marker element itself:
     Mapbox owns the marker's inline transform (translate), and overriding it
     would fling the pin off its coordinate. Origin at the teardrop tip keeps
     the anchored point fixed while the pin grows. */
  transform-origin: 50% 100%;
  transition: transform 0.16s ease;
}
.mm2-pin .mm2-pin__body {
  fill: var(--mm-green);
  transition: fill 0.16s ease;
}
.mm2-pin .mm2-pin__dot {
  fill: #fff;
}
.mm2-pin:hover svg {
  transform: scale(1.08);
}
.mm2-pin.is-selected {
  z-index: 3;
}
.mm2-pin.is-selected svg {
  transform: scale(1.22);
}
.mm2-pin.is-selected .mm2-pin__body {
  fill: var(--mm-green-800);
}
.mm2-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-weight: 700;
  border: none;
  border-radius: 50%;
  background: var(--mm-lime);
  box-shadow: var(--shadow-cluster);
  position: relative;
}
.mm2-cluster__ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(147, 213, 0, 0.4);
}
.mm2-cluster--sm { width: 34px; height: 34px; font-size: 12.5px; }
.mm2-cluster--md { width: 42px; height: 42px; font-size: 14px; }
.mm2-cluster--lg { width: 52px; height: 52px; font-size: 15.5px; }

/* Map popup (Mapbox popup content) */
.mm2-pop__name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-body);
}
.mm2-pop__addr {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  font-family: var(--font-body);
}
.mm2-pop__dir {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-green);
  text-decoration: none;
  font-family: var(--font-body);
}
.mm2-pop__dir:hover {
  text-decoration: underline;
}
.mapboxgl-popup-content {
  padding: 13px 15px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* --------------------------- Loading / app state ---------------------- */
.sl2[data-state="loading"] .sl2-results {
  opacity: 0.9;
}

/* ============================== Responsive ============================= */
@media (min-width: 701px) {
  .sl2[data-map="unavailable"] {
    grid-template-columns: 1fr;
  }
  .sl2[data-map="unavailable"] .sl2-panel {
    border-right: none;
  }
  .sl2[data-map="unavailable"] .sl2-mapwrap {
    display: none;
  }
}

@media (max-width: 700px) {
  .sl2 {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    height: 100%;
    /* Dynamic viewport height so bottom-anchored map controls stay clear of
       iOS Safari's collapsing toolbar. Falls back to 100% where dvh is unknown. */
    height: 100dvh;
  }
  .sl2-panel {
    flex: 0 0 auto;
    min-height: 0;
    border-right: none;
    max-height: 100%;
  }
  /* In list view the panel grows and its results scroll; the map is hidden. */
  .sl2[data-view="list"] .sl2-panel {
    flex: 1 1 auto;
  }
  .sl2[data-view="list"] .sl2-mapwrap {
    display: none;
  }
  /* In map view the panel shrinks to just its controls; the map fills the rest. */
  .sl2[data-view="map"] .sl2-results {
    display: none;
  }
  .sl2[data-view="map"] .sl2-mapwrap {
    flex: 1 1 auto;
    display: block;
  }

  .sl2-head {
    padding: 14px 18px 10px;
  }
  .sl2-wordmark {
    font-size: 22px;
  }
  .sl2-tagline {
    display: none;
  }
  .sl2-search {
    padding: 10px 18px 8px;
  }
  .sl2-tools {
    padding: 2px 18px 10px;
  }
  .sl2-viewtoggle {
    display: flex;
  }
  .sl2-status,
  .sl2-card,
  .sl2-skeleton {
    padding-left: 18px;
    padding-right: 18px;
  }
  .sl2-backtolist {
    display: inline-flex;
    bottom: max(18px, env(safe-area-inset-bottom));
  }
  .sl2[data-map="unavailable"] .sl2-viewtoggle,
  .sl2[data-map="unavailable"] .sl2-backtolist {
    display: none;
  }
  .sl2[data-map="unavailable"] .sl2-mapwrap {
    display: none;
  }
  .sl2-recenter {
    top: 10px;
    left: 10px;
  }
  /* Larger touch targets on phones */
  .sl2-card {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

@media (max-width: 380px) {
  .sl2-search {
    flex-wrap: wrap;
  }
  .sl2-btn--primary {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl2,
  .sl2 *,
  .sl2 *::before,
  .sl2 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}