/* =========================================================================
   home-locator.css — inline locator widget on the homepage (Figma 279:5
   Find Us · Body / 373:19 mobile/Find Us Body).

   Loaded lazily by locator-loader.js when the user is about to scroll
   into the #find-us section. Pairs with /assets/js/locator.js — the
   IDs and classes here match what locator.js queries.

   Chrome (.op-nav, .op-footer, design tokens) lives in tokens.css +
   global.css. Search-pill styling for the Find Us header lives in
   home-find.css; this file owns ONLY the body block (filters, map, list,
   pagination, leaflet overrides, mobile media query).

   The hero / standalone-page search styles that used to live at the
   top of the legacy /find-us/locator.css are intentionally not ported
   — the Find Us · Header on the homepage already provides the search
   pill via op-find-header markup.
   ========================================================================= */

.loc-search__status {
  min-height: 18px;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-mid);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.loc-search__status--visible { opacity: 1; }

/* ===== Main split (desktop) ===== */
.op-find-body {
  background: var(--white);
}
.loc-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(280px, 1fr);
  column-gap: 48px;
  /* Symmetric vertical padding (32 top, 32 bottom) so the gap below
     the map+hint matches the gap above the map (Kyle 2026-04-28). */
  padding: 32px 48px 32px;
  border-top: 1px solid var(--line);
}
.loc-main__left {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.loc-map {
  position: relative;
  /* Map extends to match the list column so the bottom of (map + hint)
     sits 32px above the signup band — symmetric with the 32px padding
     above the map (Kyle 2026-04-28). */
  height: 720px;
  border-radius: var(--radius-map);
  overflow: hidden;
  background: var(--map-grey);
  z-index: 0;
}
.loc-map:focus-visible { outline: 2px solid var(--hot-pink); outline-offset: 2px; }
.loc-map .leaflet-container { background: var(--map-grey); }
.loc-map__loading {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--map-grey);
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.loc-map.leaflet-container .loc-map__loading { display: none; }

/* Map overlays */
.loc-map__filters {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 500;
}
.loc-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.loc-filter-field__label {
  padding-left: 12px;
  color: var(--text-mid);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.loc-filter-select-wrap {
  position: relative;
  width: 150px;
  height: 44px;
  color: var(--ink);
}
.loc-filter-field--state .loc-filter-select-wrap { width: 118px; }
.loc-filter-select {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 36px 0 14px;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.loc-filter-select:focus-visible {
  outline: 2px solid var(--hot-pink);
  outline-offset: 2px;
}
.loc-filter-select__icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ===== List column ===== */
/* Endless scroll inside a fixed-height column that matches the map's
   600px (Kyle 2026-04-28). Pagination removed — locator.js now renders
   the full list and the column scrolls internally. */
.loc-list {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  min-width: 0;
  /* Taller than the 600px map so the list extends past the map column
     toward the signup band, filling the right side of the section
     (Kyle 2026-04-28 — matches Figma 278:5 spacing). The .loc-main
     ::before divider also lengthens with it because it spans the full
     grid height. */
  height: 720px;
}
/* The divider is anchored to the list rather than a fixed map width so
   the two-column desktop layout can compress cleanly on small laptops. */
.loc-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
/* Bottom fade — soft gradient from white-up to transparent at the
   inside of the scroll area, hinting that more rows live below the
   fold. Sits above the items so the last visible row's bottom edge
   reads as "fading off" rather than hard-cut. Pointer-events: none
   so the fade doesn't intercept row clicks. */
.loc-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to top, var(--white) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.loc-list__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* No top padding — the text's cap-height sits flush with the top
     of the map column to its left (Kyle 2026-04-28). */
  padding: 0 32px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.loc-list__count {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.loc-list__sort {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-soft);
}
/* Desktop renders the sort label as "BY DISTANCE" (uppercase) per
   Kyle's 2026-04-28 desktop spec; mobile keeps the source-cased
   "By Distance" so it reads softer at small sizes. */
@media (min-width: 769px) {
  .loc-list__sort { text-transform: uppercase; }
}
.loc-list__items {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* Faint scrollbar so endless-scroll affordance is discoverable without
   shouting. Webkit only — Firefox uses scrollbar-width thin via inherit. */
.loc-list__items { scrollbar-width: thin; }
.loc-list__items::-webkit-scrollbar { width: 6px; }
.loc-list__items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.loc-list__items::-webkit-scrollbar-track { background: transparent; }

/* ===== Row ===== */
.loc-row {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.loc-row__select {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 18px 32px;
  border: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.loc-row__select:hover { background: var(--paper-grey); }
.loc-row__select:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--hot-pink);
  outline-offset: -2px;
}
.loc-row__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.loc-row__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.loc-row__pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hot-pink);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.loc-row__pin--soon {
  background: var(--white);
  border: 2px solid var(--hot-pink);
}
.loc-row__name {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-row__dist {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink);
  flex-shrink: 0;
}
.loc-row__addr {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-mid);
}
.loc-row__badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.loc-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--paper-grey);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.loc-pill--pink { background: var(--hot-pink); }

/* ===== Active (expanded) row ===== */
.loc-row--active {
  padding: 8px 16px 12px;
  background: transparent;
  border-bottom: 0;
}
.loc-row--active .loc-row__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loc-row--active .loc-row__select {
  padding: 0;
  background: transparent;
}
.loc-row--active .loc-row__pin { background: var(--ink); border-color: var(--white); }
.loc-row--active .loc-row__name { font-weight: 800; font-size: 19px; }
.loc-row__actions {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}
.loc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.loc-link:hover { background: var(--paper-grey); }
.loc-link--primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.loc-link--primary:hover { background: var(--ink-hover); }
.loc-link--map { display: none; }

/* ===== Leaflet overrides ===== */
.leaflet-container { font-family: var(--font); }
.leaflet-popup-content-wrapper { border-radius: var(--radius-card); padding: 4px 8px; }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; line-height: 1.4; }
.loc-popup__name { font-weight: 700; font-size: 14px; color: var(--ink); display: block; margin-bottom: 2px; }
.loc-popup__addr { color: var(--text-mid); font-size: 12px; }
.loc-popup__link {
  display: inline-block;
  margin-top: 2px;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}
.loc-popup__link:hover { color: var(--ink); }
.loc-popup__link--cta {
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}
.loc-popup__link--cta:hover { color: var(--ink); }
.leaflet-control-zoom {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-btn) !important;
  overflow: hidden;
  box-shadow: none !important;
}
.leaflet-control-zoom a {
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 0 !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-family: var(--font);
  font-weight: 700;
}
.leaflet-control-zoom a:first-child { border-bottom: 1px solid var(--line) !important; }
.leaflet-control-attribution {
  font-family: var(--font);
  font-size: 10px;
  border-radius: 8px 0 0 0;
}

/* Custom pin markers (circular, branded) */
.loc-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hot-pink);
  border: 3px solid var(--white);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.loc-pin--soon {
  background: var(--white);
  border-color: var(--hot-pink);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.loc-pin--active {
  width: 36px;
  height: 36px;
  background: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: transparent !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--hot-pink) !important;
  border: 3px solid var(--white);
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.marker-cluster-small span,
.marker-cluster-medium span,
.marker-cluster-large span {
  line-height: 1 !important;
}
.marker-cluster-small div { width: 38px !important; height: 38px !important; font-size: 13px !important; }
.marker-cluster-medium div { width: 46px !important; height: 46px !important; font-size: 15px !important; }
.marker-cluster-large div {
  background: var(--ink) !important;
  border-color: var(--hot-pink) !important;
  color: var(--white) !important;
  width: 56px !important;
  height: 56px !important;
  font-size: 17px !important;
}

/* ===== Empty / loading ===== */
.loc-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
}
.loc-loading::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid var(--hot-pink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: loc-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes loc-spin { to { transform: rotate(360deg); } }

/* Disclaimer beneath the map/list. Customer-facing nudge that the
   storeLocatorFeed is point-in-time and inventory turns over fast — use
   it to call the store before driving over. Carried forward from the
   deleted /find-us standalone page. */
.loc-availability-hint {
  margin: 16px 0 0;
  padding: 0 16px;
  color: var(--text-soft);
  font-size: 12px;
  text-align: center;
  background: transparent;
}

/* ===== Responsive — mobile ===== */
@media (max-width: 768px) {
  .loc-search__status {
    min-height: 0;
    margin: 0;
  }
  .loc-search__status--visible {
    min-height: 18px;
    margin-bottom: 20px;
  }
  .loc-availability-hint { margin-top: 12px; padding: 0 20px; }

  .loc-main {
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line);
  }
  .loc-list::before { display: none; }

  .loc-map {
    height: clamp(230px, 30svh, 280px);
    border-radius: var(--radius-map);
  }
  .loc-map__filters {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    margin-bottom: 10px;
  }
  .loc-filter-field { width: 100%; }
  .loc-filter-select-wrap {
    width: 100%;
    max-width: none;
  }
  .loc-filter-field--state .loc-filter-select-wrap,
  .loc-filter-field--flavor .loc-filter-select-wrap { width: 100%; }

  .loc-list {
    height: clamp(320px, 45svh, 420px);
  }
  .loc-list__header { padding: 10px 0; }
  .loc-row__select { padding: 14px 0; }
  .loc-row--active { padding: 8px 0; }
  .loc-row--active .loc-row__card { padding: 16px 18px; gap: 10px; }
  .loc-row--active .loc-row__select { padding: 0; }
  .loc-row--active .loc-row__name { font-size: 16px; }
  .loc-row__name { font-size: 15px; }
  .loc-row__addr { font-size: 12px; }
  .loc-row__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-row__actions .loc-link { justify-content: center; padding: 10px; font-size: 10px; }
  .loc-link--map { display: inline-flex; }
}

/* ===== Flavor launch layer (locator-launch.js) =====
   Green marks launch evidence: solid + check = delivery recorded, white with
   a deep-green outline + clock = ordered. Symbols and text carry the meaning;
   color only reinforces it. The deep outline keeps green legible on the
   light basemap. */
.loc-filter-field[hidden] { display: none; }
@media (min-width: 769px) {
  .loc-filter-field--flavor .loc-filter-select-wrap { width: 160px; }
}
.loc-pin--launch,
.loc-row__pin--launch-delivered,
.loc-row__pin--launch-ordered,
.loc-pill--launch-ordered {
  --launch-deep: color-mix(in srgb, var(--launch-green) 38%, var(--ink));
}
.loc-pin--launch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.loc-pin__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 50%;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.loc-pin--launch-delivered .loc-pin__mark {
  background: var(--launch-green);
  border: 2px solid var(--launch-deep);
  color: var(--ink);
}
.loc-pin--launch-delivered .loc-pin__mark::before { content: "\2713"; }
.loc-pin--launch-ordered .loc-pin__mark {
  background: var(--white);
  border: 3px solid var(--launch-deep);
  color: var(--launch-deep);
}
.loc-pin--launch-ordered .loc-pin__mark::before { content: "\25F7"; font-size: 13px; }
.loc-row__pin--launch-delivered,
.loc-row--active .loc-row__pin--launch-delivered {
  background: var(--launch-green);
  border: 2px solid var(--launch-deep);
}
.loc-row__pin--launch-ordered,
.loc-row--active .loc-row__pin--launch-ordered {
  background: var(--white);
  border: 2px solid var(--launch-deep);
}
.loc-row--active .loc-row__pin--launch-delivered,
.loc-row--active .loc-row__pin--launch-ordered { box-shadow: 0 0 0 2px var(--ink); }
.loc-pill--launch { background: var(--launch-green); color: var(--ink); }
.loc-pill--launch-ordered {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--launch-deep);
  color: var(--ink);
}
.loc-pill--note {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  color: var(--text-mid);
}
.loc-popup__launch { display: block; font-weight: 700; font-size: 12px; color: var(--ink); }
/* Flavor view: clusters stay neutral (the count is matching stores, not
   deliveries) with a green ring marking the filtered layer. */
.loc-map--flavor .marker-cluster-small div,
.loc-map--flavor .marker-cluster-medium div,
.loc-map--flavor .marker-cluster-large div {
  background: var(--white) !important;
  border-color: var(--launch-green) !important;
  color: var(--ink) !important;
}