/* Find a Location (/locations, /locations/<product>).
   Mobile first: base rules are the phone, min-width queries add room.
   The finder is the page: search sits in the hero, the map and list come
   straight after the product picker, and from 1100px the list and map sit
   side by side, linked. Colours are the brand tokens in site.css.
   PURE ASCII ONLY in this file. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.loc-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- hero: short, with the search in it ---- */
.loc-hero { position: relative; overflow: hidden; text-align: left; padding: 24px 0 26px; }
.loc-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 494 / 604; max-width: 40%;
  background: url("/images/brand/edge-c.svg") left center / auto 100% no-repeat; opacity: .06; pointer-events: none; }
.loc-hero > .wrap { position: relative; z-index: 1; }
.loc-hero .eyebrow { margin: 0 0 10px; }
.loc-hero .eyebrow[hidden] { display: none; }
.loc-hero h1 { font-size: clamp(28px, 7vw, 46px); line-height: 1.08; margin: 0 0 10px; max-width: 22ch; }
.loc-intro { color: #cbd3da; font-size: 16px; font-weight: 300; line-height: 1.55; max-width: 62ch; margin: 0 0 18px; }
.loc-about { margin-left: 4px; color: var(--blue-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.loc-about[hidden] { display: none; }
.loc-about:hover { color: #fff; }

.loc-search { display: flex; gap: 8px; max-width: 640px; }
.loc-search input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 16px; font: 400 16px/1.2 var(--body); color: var(--ink);
  background: #fff; border: 2px solid #fff; border-radius: 0; }
.loc-search input:focus { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.loc-near { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 14px;
  font: 600 14px/1 var(--body); color: #fff; background: transparent; border: 2px solid rgba(255, 255, 255, .55); cursor: pointer; }
.loc-near svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.loc-near:hover { border-color: #fff; }
.loc-near[aria-pressed="true"] { background: #fff; color: var(--polar-night); border-color: #fff; }
.loc-near:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.loc-near[hidden] { display: none; }
.loc-hint { margin: 10px 0 0; font-size: 13px; color: #cbd3da; }
.loc-hint[hidden] { display: none; }

/* ---- product picker: the lead form's product cards (.lp-card, site.css), as links.
   One choice at a time, so no tick boxes: the chosen card takes the brand's
   spectrum edge, which the brand guide keeps for interactive elements. ---- */
.loc-wrap { padding: 18px 0 48px; }
.loc-prods { margin-bottom: 14px; }
/* 96px leaves a sliver of the fourth card on a phone, so it reads as swipeable */
.loc-pick-carousel .cc-track { grid-auto-columns: 96px; gap: 8px; }
.loc-pick-carousel .cc-arrow, .loc-pick-carousel .cc-bar { display: none !important; }
.loc-pick { display: block; color: inherit; text-decoration: none; }
.loc-pick .lp-card { gap: 6px; padding: 10px 6px 12px; overflow: hidden; }
.loc-pick .lp-img { height: 48px; }
.loc-pick .lp-img img { max-height: 48px; }
.lp-all { width: 34px; height: 34px; fill: var(--deep-blue); }
.loc-pick:hover .lp-card { border-color: #b4c9db; }
.loc-pick[aria-current="true"] .lp-card { border-color: var(--signal-blue); background: #fff; }
.loc-pick[aria-current="true"] .lp-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad-spectrum); }
.loc-pick[aria-current="true"] .lp-all { fill: var(--signal-blue); }
.loc-pick:focus-visible { outline: none; }
.loc-pick:focus-visible .lp-card { outline: 2px solid var(--signal-blue); outline-offset: 3px; }
.lp-count { font-size: 12px; font-weight: 600; color: var(--silver-dark); line-height: 1; }
.loc-pick[aria-current="true"] .lp-count { color: var(--signal-blue); }

/* ---- models of the chosen product (shown once the sheet names variations) ---- */
.loc-vars { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 14px; }
.loc-vars[hidden] { display: none; }
.loc-var { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: 600 14px/1 var(--body);
  color: var(--polar-night); background: #fff; border: 1px solid var(--silver-light); cursor: pointer; }
.loc-var .n { font-size: 12px; color: var(--silver-dark); }
.loc-var:hover { border-color: var(--signal-blue); }
.loc-var[aria-pressed="true"] { color: #fff; background: var(--polar-night); border-color: var(--polar-night); }
.loc-var[aria-pressed="true"] .n { color: var(--blue-light); }
.loc-var:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }

/* ---- count and view toggle ---- */
.loc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.loc-count { margin: 0; font-size: 15px; font-weight: 600; color: var(--polar-night); }
.loc-reset { margin-left: 8px; padding: 0; font: 600 14px/1 var(--body); color: var(--signal-blue); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.loc-reset[hidden] { display: none; }
.loc-view { display: flex; border: 1px solid var(--silver-light); background: #fff; }
.loc-view[hidden] { display: none; }
.loc-view button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  font: 600 14px/1 var(--body); color: var(--silver-dark); background: transparent; border: 0; cursor: pointer; }
.loc-view button + button { border-left: 1px solid var(--silver-light); }
.loc-view button[aria-pressed="true"] { background: var(--polar-night); color: #fff; }
.loc-view button:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: -2px; }
.loc-view svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- map ---- */
.loc-map-wrap[hidden] { display: none; }
.loc-map { height: 64vh; min-height: 360px; max-height: 680px; background: var(--cold-daylight); border: 1px solid var(--line); z-index: 0; }
/* The standard map colours fight the brand; greyed down, the pins carry the colour. */
.loc-map .leaflet-tile-pane { filter: grayscale(1) contrast(.9) brightness(1.05); }
.loc-map-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--silver-dark); }
.loc-key-show { width: 12px; height: 12px; flex: none; background: var(--polar-night); border-bottom: 3px solid var(--red-light); }
.loc-map .leaflet-control-attribution { font-size: 10px; }
/* the two-finger hint on touch screens */
.loc-map-hint { position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px;
  font: 600 16px/1.3 var(--body); color: #fff; text-align: center; background: rgba(11, 23, 59, .82); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.loc-map-hint.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .loc-map-hint { transition: none; } }
.loc-pin { background: none; border: 0; }
.loc-pin span { position: relative; display: block; width: 26px; height: 26px; margin: 2px 0 0 1px; background: var(--signal-blue); border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(11, 23, 59, .35); }
.loc-pin span::after { content: ""; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
.loc-pin.is-on span { background: var(--red-light); }
.loc-you { width: 16px; height: 16px; background: var(--red-light); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 6px rgba(179, 61, 38, .2); }

.loc-pop { font-family: var(--body); color: var(--ink); min-width: 200px; }
.loc-pop h3 { font: 700 16px/1.25 var(--head); letter-spacing: -.01em; margin: 0 0 4px; }
.loc-pop address { font-style: normal; font-size: 13px; line-height: 1.45; color: var(--silver-dark); margin: 0 0 8px; }
.loc-pop address span { display: block; }
.loc-pop .loc-tags { margin: 0 0 6px; }
.loc-pop .loc-actions { gap: 2px 14px; }
.loc-pop .loc-act { min-height: 36px; font-size: 13px; }
.leaflet-popup-content-wrapper { border-radius: 0; }
.leaflet-container a.loc-act { color: var(--signal-blue); }

/* the showroom pin and popup */
.loc-pin-show { background: none; border: 0; display: flex; flex-direction: column; align-items: center; }
.lps-tag { position: relative; display: block; padding: 7px 12px 6px; font: 700 12px/1 var(--body); letter-spacing: .3px; white-space: nowrap;
  color: #fff; background: var(--polar-night); border: 2px solid #fff; border-bottom: 0; box-shadow: 0 3px 10px rgba(11, 23, 59, .4); }
.lps-sub { position: relative; display: block; padding: 3px 8px 4px; font: 700 9.5px/1 var(--body); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: var(--red-light); border: 2px solid #fff; border-top: 0; box-shadow: 0 3px 10px rgba(11, 23, 59, .4); }
.lps-sub::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.loc-pop-show .loc-sr-badge { display: inline-block; margin: 0 0 8px; }
.loc-pop-sub { margin: 0 0 6px !important; font-size: 13px; color: var(--silver-dark); }
.loc-pop-show address span:last-child { margin-top: 3px; font-weight: 700; color: var(--polar-night); }
.loc-pop-show .loc-pop-book { min-height: 36px; padding: 0 16px; font-size: 13px; }
.loc-popup-show .leaflet-popup-content-wrapper { border-top: 4px solid var(--polar-night); }

/* ---- list: compact rows, grouped by state ---- */
.loc-list[hidden], .loc-flat[hidden], .loc-state[hidden], .loc-card[hidden] { display: none; }
.loc-state { margin-top: 18px; }
.loc-state-h { margin: 0; padding: 8px 0; font: 600 15px/1.3 var(--body); letter-spacing: 0; color: var(--polar-night); border-bottom: 2px solid var(--polar-night); background: #fff; }
.loc-grid, .loc-flat { display: grid; }
.loc-card { display: grid; gap: 4px; padding: 14px 12px 8px; margin: 0 -12px; border-bottom: 1px solid var(--line); scroll-margin: 60px; }
.loc-card.is-on { background: var(--cold-daylight); }
.loc-name { margin: 0; font: 700 17px/1.25 var(--head); letter-spacing: -.01em; color: var(--polar-night); }
.loc-addr { font-style: normal; font-size: 14px; line-height: 1.45; color: var(--silver-dark); }
.loc-dist { margin: 0; font-size: 13px; font-weight: 700; color: var(--red-light); }
.loc-dist[hidden] { display: none; }
.loc-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; }
.loc-tag { min-height: 32px; padding: 0 10px; font: 600 12.5px/1 var(--body); color: var(--deep-blue); background: var(--cold-daylight); border: 0; cursor: pointer; }
.loc-tag:hover { background: var(--signal-blue); color: #fff; }
.loc-tag:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }
.loc-card.is-on .loc-tag { background: #fff; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 0 18px; }
.loc-act { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font: 600 14px/1 var(--body); color: var(--signal-blue);
  background: none; border: 0; text-decoration: none; cursor: pointer; }
.loc-act:hover { color: var(--deep-blue); text-decoration: underline; text-underline-offset: 3px; }
.loc-act:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }

/* the Jacksonville showroom: navy, so it never reads as one of the locations */
.loc-showroom { position: relative; display: grid; gap: 6px; padding: 18px 18px 8px; background: var(--polar-night); color: #fff;
  border-left: 3px solid var(--red-light); overflow: hidden; }
.loc-showroom[hidden] { display: none; }
.loc-showroom::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 494 / 604; max-width: 40%;
  background: url("/images/brand/edge-c.svg") left center / auto 100% no-repeat; opacity: .07; pointer-events: none; }
.loc-showroom > * { position: relative; z-index: 1; }
.loc-sr-badge { justify-self: start; margin: 0; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; background: var(--red-light); }
.loc-sr-name { margin: 4px 0 0; font: 600 21px/1.15 var(--head); letter-spacing: -.01em; color: #fff; }
.loc-sr-sub { margin: 0; font-size: 15px; color: #cbd3da; }
.loc-showroom .loc-addr { color: #cbd3da; }
.loc-sr-hours { margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
.loc-showroom .loc-dist { color: #f3a08f; }
.loc-showroom .loc-actions { align-items: center; margin-top: 6px; }
.loc-showroom .loc-actions .btn { min-height: 44px; margin-right: 6px; }
.loc-showroom .loc-act { color: #fff; }
.loc-showroom .loc-act:hover { color: var(--blue-light); }

.loc-empty { padding: 28px 0 8px; color: var(--silver-dark); }
.loc-empty[hidden] { display: none; }
.loc-empty p { margin: 0 0 14px; font-size: 16px; }
.loc-error { padding: 24px 0; font-size: 16px; }
.loc-error a { color: var(--signal-blue); text-decoration: underline; }

/* ---- FAQ: the product pages' open FAQ layout (product.css .pp .pfo-*) ---- */
.loc-faq .pfo { display: grid; gap: 28px; }
.loc-faq .pfo-head { margin: 0; text-align: left; }
.loc-faq .pfo-head h2 { margin: 0 0 12px; }
.loc-faq .pfo-sub { margin: 0 0 14px; font-size: 16px; color: var(--silver-dark); }
.loc-faq .pfo-item { padding: 22px 0 24px; border-bottom: 1px solid var(--silver-light); }
.loc-faq .pfo-item:first-child { padding-top: 0; }
.loc-faq .pfo-q { margin: 0 0 10px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--polar-night); }
.loc-faq .pfo-a { max-width: 66ch; font-size: 16px; line-height: 1.65; color: var(--silver-dark); }
.loc-faq .pfo-a p { margin: 0; }
.loc-faq .pfo-a a { color: var(--signal-blue); text-decoration: underline; }

/* ---- larger screens ---- */
@media (min-width: 640px) {
  .loc-pick-carousel .cc-track { grid-auto-columns: 120px; }
  .loc-pick .lp-img { height: 56px; }
  .loc-pick .lp-img img { max-height: 56px; }
  .loc-grid, .loc-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 900px) {
  .loc-hero { padding: 36px 0 40px; }
  .loc-intro { font-size: 18px; }
  .loc-wrap { padding: 24px 0 72px; }
  .loc-showroom { padding: 22px 26px 10px; }
  .loc-faq .pfo { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
}
/* Side by side: the list scrolls in its own column, the map stays in view
   beside it, and both answer each other (hover a row, its pin lights up;
   move the map, the list follows). No view toggle needed. */
@media (min-width: 1100px) {
  .loc-view { display: none !important; }
  .loc-body { display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .loc-body .loc-list[hidden], .loc-body .loc-map-wrap[hidden] { display: block; }
  .loc-list { max-height: calc(100vh - 150px); min-height: 520px; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 0 12px; margin-left: -12px; scrollbar-width: thin; }
  .loc-grid, .loc-flat { grid-template-columns: minmax(0, 1fr); }
  .loc-state-h { position: sticky; top: 0; z-index: 2; }
  .loc-map-wrap { position: sticky; top: 130px; }
  .loc-map { height: calc(100vh - 170px); min-height: 520px; max-height: 860px; }
}