/*
 * Dealer finder — /ตัวแทนจำหน่าย/
 *
 * Filters + result list on the left, map on the right; on a phone they stack
 * as map, filters, list — all on one page. Everything is scoped under .pf-finder so none of it can reach
 * the theme's own markup, which the rest of the site still has to match
 * pixel for pixel.
 *
 * Colours are taken from the existing Flatsome theme (#446084 link blue,
 * #d8232a Profender red) rather than introduced, so the page reads as part of
 * the same site.
 */

.pf-finder {
  --pf-red: #d8232a;
  --pf-blue: #446084;
  --pf-ink: #1e2022;
  --pf-muted: #6d7378;
  --pf-line: #e4e7ea;
  --pf-bg-soft: #f7f8f9;
  margin: 0 0 2.5rem;
}

.pf-finder__title {
  margin: 0 0 .35em;
  font-size: 1.9rem;
  line-height: 1.2;
}

.pf-finder__lead {
  margin: 0 0 1.25rem;
  color: var(--pf-muted);
  font-size: .95rem;
  line-height: 1.7;
  max-width: 60ch;
}

/* ---------------------------------------------------------------- layout */
.pf-finder__layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 1.5rem;
  align-items: start;
}

.pf-finder__side {
  min-width: 0;
}

.pf-finder__mapwrap {
  min-width: 0;
  position: sticky;
  top: 1rem;
}

/* --------------------------------------------------------------- filters */
.pf-filters {
  padding: 1rem;
  border: 1px solid var(--pf-line);
  border-radius: 6px;
  background: var(--pf-bg-soft);
  margin-bottom: 1rem;
}

.pf-filters__row {
  margin-bottom: .8rem;
}

.pf-filters__row:last-of-type {
  margin-bottom: 0;
}

.pf-filters__label {
  display: block;
  margin-bottom: .3rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pf-ink);
}

/* The theme styles inputs globally; these override only what matters here so
   the controls are comfortable to hit on a phone. */
.pf-finder .pf-filters__input,
.pf-finder .pf-filters__select {
  width: 100%;
  height: auto;
  min-height: 42px;
  margin: 0;
  padding: .5rem .6rem;
  border: 1px solid #cfd4d8;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: none;
  color: var(--pf-ink);
  font-size: .95rem;
  line-height: 1.4;
}

.pf-finder .pf-filters__input:focus,
.pf-finder .pf-filters__select:focus {
  border-color: var(--pf-blue);
  outline: 2px solid rgba(68, 96, 132, .25);
  outline-offset: 1px;
}

.pf-filters__actions {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

.pf-finder .pf-filters__submit,
.pf-finder .pf-filters__reset {
  flex: 1 1 0;
  min-height: 42px;
  margin: 0;
  padding: .55rem .7rem;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.pf-finder .pf-filters__submit {
  border: 1px solid var(--pf-red);
  background: var(--pf-red);
  color: #fff;
}

.pf-finder .pf-filters__reset {
  border: 1px solid #cfd4d8;
  background: #fff;
  color: var(--pf-ink);
}

/* The fold button: phone + script only (see the 849px block). */
.pf-finder .pf-filters__toggle {
  display: none;
}

/* With JS on, filtering is live and the submit button is redundant. It stays
   in the markup (and works) for the no-JS case. */
.pf-finder.pf-finder--js .pf-filters__submit {
  display: none;
}

/* ------------------------------------------------------------ result list */
.pf-finder__count {
  margin: 0 0 .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--pf-muted);
}

.pf-dealers {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Long enough to feel like a list, short enough that the map stays on
     screen beside it. */
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--pf-line);
  border-radius: 6px;
}

.pf-dealer {
  margin: 0;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--pf-line);
  list-style: none;
}

.pf-dealer:last-child {
  border-bottom: 0;
}

.pf-dealer.is-active {
  background: #fff6f6;
  box-shadow: inset 3px 0 0 var(--pf-red);
}

/* The shop photo, on the LEFT of the card (เจ้าของสั่ง 12 ก.ย. 2026 — it was
   on the right until then).
   Floated rather than given the card a grid: the card's children are a flat
   list written by two different builders (PHP for the first 40, JS for the
   rest), and a float lets the text wrap beside the picture without either of
   them having to emit a wrapper element. The fixed box stops ~1,050 images of
   assorted proportions from making the list jump as they load. */
.pf-dealer__photo-btn {
  float: left;
  margin: .1rem .75rem .5rem 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;         /* no descender gap under the image */
  cursor: zoom-in;
  border-radius: 6px;
}

.pf-dealer__photo-btn:focus-visible {
  outline: 2px solid var(--pf-red);
  outline-offset: 2px;
}

.pf-dealer__photo {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--pf-line);
  border-radius: 6px;
  background: #f4f4f4;
  transition: border-color .12s ease;
}

.pf-dealer__photo-btn:hover .pf-dealer__photo,
.pf-dealer__photo-btn:focus-visible .pf-dealer__photo {
  border-color: var(--pf-red);
}

/* A float shortens the LINE boxes beside it but not the block boxes: the
   card's <h2>/<p> still begin at the card's left edge, so their first lines
   wrapped around the picture while their second lines slid underneath it —
   text visibly tucked under the photo (measured 12 ก.ย. 2026: h2.x == btn.x).
   Indenting the siblings by the picture's width keeps every line of the card
   in one column beside it. The photo is the only floated child, so this is
   safe to apply to all of them; a card without a photo has no
   .pf-dealer__photo-btn and is therefore untouched. */
.pf-dealer__photo-btn ~ .pf-dealer__name,
.pf-dealer__photo-btn ~ .pf-dealer__address {
  /* padding, not margin: a margin shifts the box right and lets its right edge
     run past the card (measured 16 ก.ย. 2026 — 38 of 40 cards overflowed at
     360px, a 274px name starting at x=100 inside a 306px card). Padding moves
     the text and keeps the box inside. */
  padding-left: calc(72px + .75rem);
}

/* Thai shop names are long and often have no space to break at — "บริษัท
   เคพีเอ็น ออโต้ไทร์ 1976 จำกัด (สำนักงานใหญ่)" — so without this they push
   the card sideways instead of wrapping. */
.pf-dealer__name,
.pf-dealer__address {
  overflow-wrap: anywhere;
}

/* The enlargement. One element reused by every card, so it lives at the end
   of <body> rather than inside a card. */
.pf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0, 0, 0, .82);
}

.pf-lightbox[hidden] { display: none; }

/* The page behind must not scroll while the picture is open. */
body.pf-lightbox-open { overflow: hidden; }

.pf-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

/* Bounded by the viewport, never by the file's own size: some originals are
   1477px wide. */
.pf-lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #222;
}

.pf-lightbox__caption {
  color: #fff;
  font-size: .95rem;
  line-height: 1.5;
  text-align: center;
  max-width: 60ch;
}

.pf-lightbox__close {
  position: absolute;
  top: max(2vmin, .5rem);
  right: max(2vmin, .5rem);
  width: 44px;               /* a real touch target */
  height: 44px;
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  cursor: pointer;
}

.pf-lightbox__close:hover,
.pf-lightbox__close:focus-visible {
  background: var(--pf-red);
  border-color: var(--pf-red);
}

/* The float must not escape its card. */
.pf-dealer::after {
  content: '';
  display: block;
  clear: both;
}

.pf-dealer__name {
  margin: 0 0 .3rem;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pf-ink);
  letter-spacing: 0;
}

/* A pinned shop's name jumps to its marker, so it must read as clickable —
   but only once the script runs; without JS there is no map to jump to. */
.pf-finder--js .pf-dealer[data-pf-pin] .pf-dealer__name {
  cursor: pointer;
}

.pf-finder--js .pf-dealer[data-pf-pin] .pf-dealer__name:hover,
.pf-finder--js .pf-dealer[data-pf-pin] .pf-dealer__name:focus-visible {
  color: var(--pf-blue);
  text-decoration: underline;
  outline: none;
}

/* Aligned to the photo's left edge and spanning the card, rather than
   indented past it with the name and the address (owner, 16 ก.ย. 2026). In the
   indent the row had 239px of a 355px card, so "MINI PFD CENTER" + "รถยนต์"
   (104 + 49 + gap) sat one stray pixel from wrapping and a longer pair did
   wrap — measured before the change. Out here the pair always fits on the one
   line the badges are meant to read as. */
.pf-dealer__badges {
  margin: 0 0 .35rem;
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
  align-items: center;
}

/* Beside the name, in the column to the right of the picture (owner,
   16 ก.ย. 2026 — the badges had briefly been cleared to the picture's left
   edge, which dropped them below it and cost ~42px of height per card).
   Same indent as the name and the address, so the three read as one column. */
/* No padding here, unlike the name and the address. This row is a flex
   container: the float already shortens its line box from the left, so it
   begins at the text column on its own. Adding the 84px indent on top put the
   chips at x=184 while the name and address began at x=100 — the indent was
   being applied twice (measured 16 ก.ย. 2026; `display: block` on the same
   row rendered at x=100, which is what identified it). */
.pf-dealer__photo-btn ~ .pf-dealer__badges {
  padding-left: 0;
}

/* A shade smaller than the address beside them: these are labels, not
   content, and on a card scanned in a list they should register without
   competing with the shop name. Not smaller than .68rem — at 1x the uppercase
   "MINI PFD CENTER" starts to break up below that. min-width: 0 + ellipsis so
   a long class name shortens instead of pushing the row wider than the card. */
.pf-badge {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 3px;
  background: #eceff1;
  color: #4a5157;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Cluster bubbles, overriding MarkerCluster.Default.css.
 *
 * The vendor default paints small clusters green, medium yellow and large
 * RED — which, now that pin colour means store_class, would read as "this
 * cluster is a PFD CENTER". Colour has to mean one thing on one map, so the
 * bubbles become a neutral slate and let the NUMBER carry the size.
 *
 * The vendor file is third-party and left untouched; these rules sit after
 * it in the cascade. Selectors match its specificity exactly (.x and .x div),
 * so no !important is needed.
 */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(71, 85, 105, .28);
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: rgba(51, 65, 85, .92);
  color: #fff;
}

.marker-cluster span {
  font-weight: 700;
}

/*
 * Map legend.
 *
 * The dot colours MUST stay in step with CLASS_PIN in pf-dealer-finder.js —
 * they are the same four colours, one drawn by CSS and one baked into the
 * SVG pin. Changing one without the other makes the key lie.
 */
.pf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
  color: var(--pf-muted);
}

.pf-legend__item {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.pf-legend__dot {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.pf-legend__dot--pfd_center { background: #d0021b; }
.pf-legend__dot--mini_pfd_center { background: #f0616a; }
.pf-legend__dot--recommended { background: #f5a623; }
.pf-legend__dot--general { background: #3f7fd4; }

.pf-badge--recommended {
  background: #fff0cd;
  color: #7a5600;
}

.pf-badge--pfd_center {
  background: var(--pf-red);
  color: #fff;
}

.pf-badge--mini_pfd_center {
  background: #fde0e1;
  color: #9c1015;
}

.pf-dealer__address {
  margin: 0 0 .45rem;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--pf-muted);
}

.pf-dealer__actions {
  margin: .5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  align-items: center;
}

/* The buttons span the card rather than sitting beside the photo. The list
   column is ~355px at every breakpoint and the row needs ~318px plus gaps, so
   indenting it past the 72px picture forced "นำทาง" onto a line of its own
   (measured 16 ก.ย. 2026). Below the picture they fit on one row and are
   easier to hit with a thumb. */
.pf-dealer__photo-btn ~ .pf-dealer__actions {
  clear: both;
  padding-top: .1rem;
}

/* Visible only to a screen reader — used to say that "นำทาง" leaves the site. */
.pf-finder .pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The icon rides on the text colour, so one path serves the outlined button,
   the filled button and the red phone link. */
.pf-finder .pf-dealer__ico {
  flex: none;
  width: 16px;
  height: 16px;
}

/* The number takes its own line: the two buttons plus a phone number total
   ~318px and the card column is 355px, so sharing a row pushed "นำทาง" down
   anyway (measured 16 ก.ย. 2026). On its own line it reads first — which is
   the order a visitor wants: see who it is, call, or go. */
.pf-finder .pf-dealer__phone {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 1 0 100%;
  min-height: 44px;
  padding: 0 .2rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--pf-red);
  text-decoration: none;
}

/* 44px is the floor for a touch target (WCAG 2.5.5 / Apple HIG). These were
   29px — measured 16 ก.ย. 2026 — which is why the owner found them fiddly.
   The height comes from padding, not from a bigger font: the label stays the
   same size it has always been, only the area you can hit grows. */
.pf-finder .pf-dealer__locate,
.pf-finder .pf-dealer__directions {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: .45rem .85rem;
  border: 1px solid #cfd4d8;
  border-radius: 4px;
  background: #fff;
  color: var(--pf-blue);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

/* "นำทาง" is the one a visitor on the road actually wants — it opens their map
   app and starts the journey — so it carries the weight; "ดูบนแผนที่" only
   moves the map on this page and stays quiet beside it. */
.pf-finder .pf-dealer__directions {
  border-color: var(--pf-blue);
  background: var(--pf-blue);
  color: #fff;
}

.pf-finder .pf-dealer__locate:hover,
.pf-finder .pf-dealer__locate:focus-visible {
  border-color: var(--pf-blue);
  background: #f4f8fc;
}

.pf-finder .pf-dealer__directions:hover,
.pf-finder .pf-dealer__directions:focus-visible {
  filter: brightness(.92);
}

/* The locate button needs the map script; without it there is nothing to
   focus. */
.pf-finder:not(.pf-finder--js) .pf-dealer__locate {
  display: none;
}

.pf-dealers__empty {
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px dashed var(--pf-line);
  border-radius: 6px;
  color: var(--pf-muted);
  font-size: .9rem;
  text-align: center;
}

.pf-finder .pf-dealers__more {
  width: 100%;
  margin: .75rem 0 0;
  padding: .6rem;
  border: 1px solid #cfd4d8;
  border-radius: 4px;
  background: #fff;
  color: var(--pf-ink);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

/* ------------------------------------------------------------------- map */
.pf-map {
  height: min(72vh, 720px);
  min-height: 380px;
  border: 1px solid var(--pf-line);
  border-radius: 6px;
  background: #e8eef2;
  /* Leaflet writes inline positions into this element; keep the theme from
     imposing its own on the tiles. */
  z-index: 0;
}

.pf-map__noscript {
  margin: 0;
  padding: 1.5rem;
  color: var(--pf-muted);
  font-size: .9rem;
  text-align: center;
}

.pf-map__touch {
  display: none;
  margin: .4rem 0 0;
  font-size: .8rem;
  color: var(--pf-muted);
}

.pf-map__note {
  margin: .6rem 0 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--pf-muted);
}

/* Leaflet's popup, matched to the list card. */
.pf-popup__name {
  margin: 0 0 .25rem;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.4;
}

.pf-popup__address {
  margin: 0 0 .4rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--pf-muted);
}

.pf-popup__phone {
  font-size: .88rem;
  font-weight: 700;
  color: var(--pf-red);
  text-decoration: none;
}

.pf-popup__directions {
  display: inline-block;
  margin-left: .6rem;
  font-size: .82rem;
  color: var(--pf-blue);
}

/* --------------------------------------------------------------- mobile */
/* A phone-width card: the picture keeps its column for the name, badges and
   address, but the buttons go full width underneath it. Two 44px targets and a
   phone number do not fit in (360px - 72px - gutters) without wrapping badly. */
@media (max-width: 560px) {
  .pf-finder .pf-dealer__locate,
  .pf-finder .pf-dealer__directions {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 849px) {
  /* Map, filters, list — all visible at once (owner, 29 ก.ย. 2026). They
     were two tabs, and a visitor who never pressed "แผนที่" never learnt
     there was a map. The map goes first: after the filter form (~480px) it
     only peeked out at the bottom of the first screen. The side pane's box
     is dissolved so the order is CSS-only; the markup stays desktop-shaped. */
  .pf-finder__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .pf-finder__side {
    display: contents;
  }

  .pf-finder__side > * {
    order: 3;
  }

  .pf-finder__side > .pf-filters {
    order: 2;
  }

  /* Filter fields folded by default behind one full-width button (owner,
     29 ก.ย. 2026). With the script off there is nothing to unfold them, so
     they stay open. */
  .pf-finder--js .pf-filters {
    padding: 0;
  }

  .pf-finder--js .pf-filters__body {
    padding: 0 1rem 1rem;
  }

  .pf-finder--js .pf-filters:not(.is-open) .pf-filters__body {
    display: none;
  }

  .pf-finder.pf-finder--js .pf-filters__toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: .6rem 1rem;
    border: 0;
    background: none;
    color: var(--pf-ink);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
  }

  /* The theme's `button:focus { outline: none }` would leave a borderless
     button with no focus mark at all. */
  .pf-finder.pf-finder--js .pf-filters__toggle:focus-visible {
    outline: 2px solid var(--pf-blue);
    outline-offset: -2px;
    border-radius: 6px;
  }

  .pf-filters__badge {
    min-width: 1.4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--pf-red);
    color: #fff;
    font-size: .78rem;
    line-height: 1.4;
    text-align: center;
  }

  .pf-filters__badge[hidden] {
    display: none;
  }

  /* A chevron drawn with borders — no icon font to load for one arrow. */
  .pf-filters__chev {
    width: .55rem;
    height: .55rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform .15s;
  }

  .pf-filters.is-open .pf-filters__chev {
    transform: translateY(25%) rotate(-135deg);
  }

  .pf-finder__mapwrap {
    order: 1;
    position: static;
    margin-bottom: 1rem;
    /* Clears the theme's sticky header when a card's "ดูบนแผนที่" scrolls
       back up to the map. */
    scroll-margin-top: 80px;
  }

  .pf-dealers {
    max-height: none;
    overflow-y: visible;
  }

  /* Short enough that the first dealer card peeks out below it, so the list
     is as discoverable as the map now is. */
  .pf-map {
    height: 45vh;
    min-height: 260px;
  }

  .pf-finder--two-finger .pf-map__touch {
    display: block;
  }
}

/* ------------------------------------------------------------ near me
   "ร้านใกล้ฉัน" (owner, 21 ต.ค. 2026) — first in the filter card on a
   computer, beside the folded-filters button on a phone (owner's choice "A").
   Hidden until pf-dealer-finder.js finds geolocation. */
.pf-finder .pf-near {
  margin: 0 0 1rem;
}
.pf-finder .pf-near[hidden] {
  display: none;
}
.pf-finder .pf-near__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin: 0;
  padding: .55rem 1.1rem;
  width: 100%;
  justify-content: center;
  border: 1px solid var(--pf-red);
  border-radius: 4px;
  background: #fff;
  color: var(--pf-red);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.pf-finder .pf-near__btn:hover {
  background: #fdf1f1;
}
/* Flatsome removes button focus outlines; keyboard users need one. */
.pf-finder .pf-near__btn:focus-visible {
  outline: 2px solid var(--pf-red);
  outline-offset: 2px;
}
.pf-finder .pf-near__btn.is-on {
  background: var(--pf-red);
  color: #fff;
}
.pf-finder .pf-near__btn.is-busy {
  opacity: .7;
  cursor: progress;
}
.pf-finder .pf-near__ico {
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.pf-finder .pf-near__msg:empty {
  display: none;
}
.pf-finder .pf-near__msg {
  margin: .5rem 0 0;
  color: var(--pf-muted);
  font-size: .85rem;
}
.pf-finder .pf-dealer__dist {
  margin: .15rem 0 0;
  color: var(--pf-red);
  font-size: .85rem;
  font-weight: 600;
}
/* In the text column beside the photo, like the name and the address. */
.pf-finder .pf-dealer__photo-btn ~ .pf-dealer__dist {
  padding-left: calc(72px + .75rem);
}
@media (max-width: 849px) {
  /* One row: [ร้านใกล้ฉัน] [ค้นหา / กรองร้าน ▾]; the fields open below both. */
  .pf-finder.pf-finder--js .pf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }
  .pf-finder.pf-finder--js .pf-filters > .pf-near {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }
  .pf-finder.pf-finder--js .pf-filters > .pf-near .pf-near__btn {
    height: 100%;
    padding: .5rem .6rem;
  }
  .pf-finder.pf-finder--js .pf-filters > .pf-filters__toggle {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }
  .pf-finder.pf-finder--js .pf-filters > .pf-filters__body {
    flex-basis: 100%;
  }
  .pf-finder.pf-finder--js .pf-filters > .pf-near .pf-near__msg {
    margin-top: .4rem;
  }
}
.pf-finder .pf-dealer__dist--unknown {
  color: var(--pf-muted);
  font-weight: 400;
}