/* Where to Buy */
.loc-head { padding: 24px 0 8px; }
.locator { padding-top: 8px; }
.loc-head .lead { margin: 8px 0 0; }
.loc-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 0; }
.loc-tools > *, .loc-body > * { min-width: 0; }
.loc-row { display: flex; gap: 10px; }
.near-btn { flex: none; }
.search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--aqua); }
.search input { flex: 1; min-width: 0; border: 0; background: none; font: 400 1rem/1 var(--font-ui); color: var(--ink); outline: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.chip .dot { margin-right: 2px; }
.loc-status { margin: 2px 0 0; color: var(--ink-soft); font: 500 .78rem/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; min-height: 1.4em; }

.loc-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .loc-body { grid-template-columns: 380px 1fr; align-items: start; } }
.map-wrap { position: relative; height: 52vh; min-height: 300px; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-1); scroll-margin-top: calc(var(--header-h) + 8px); }
@media (min-width: 900px) { .map-wrap { order: 2; position: sticky; top: calc(var(--header-h) + 16px); height: calc(100vh - var(--header-h) - 32px); max-height: 760px; } }
#map { position: absolute; inset: 0; background: #eef0ee; }

.loc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .loc-list { order: 1; } }
.loc { display: flex; align-items: center; gap: 4px; border-radius: 16px; box-shadow: 0 1px 2px rgba(80,48,21,.06); background: #fff; transition: box-shadow 160ms ease, background-color 160ms ease; }
.loc.on { box-shadow: inset 0 0 0 2px var(--ink); }
.loc-main { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 6px 10px 14px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 14px; }
.loc-main > span:nth-child(2) { display: grid; flex: 1; }
.loc-main b { font-weight: 650; line-height: 1.25; }
.loc-main small { color: var(--ink-soft); font-size: .85rem; }
.dist { font-weight: 650; font-size: .9rem; color: var(--green-deep); white-space: nowrap; }
.dir-link { flex: none; padding: 12px 14px; font: 500 .75rem/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--green-deep); text-decoration: none; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .dir-link:hover { background: var(--paper); } .loc-main:hover b { text-decoration: underline; } }
.loc-shop { flex-direction: column; align-items: stretch; background: #fff3e8; box-shadow: inset 0 0 0 2px var(--orange); }
.loc-shop .loc-main .dot { width: 14px; height: 14px; }
.loc-actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.loc-actions .btn { flex: 1; white-space: nowrap; }
.loc-empty { padding: 24px; text-align: center; color: var(--ink-soft); }

/* pins */
.pin-wrap { background: none; border: 0; }
.pin { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform 150ms var(--ease-out); }
.pin.on { transform: scale(1.35); }
.pin-shop { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); box-shadow: 0 4px 12px rgba(0,0,0,.3); display: grid; place-items: center; overflow: hidden; }
.pin-shop img { width: 36px; height: 36px; object-fit: contain; }
.pin-shop.on { transform: scale(1.15); }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { font: 400 .95rem/1.45 var(--font-ui); margin: 12px 16px; }
.leaflet-popup-content a { color: var(--green-deep); font-weight: 650; }
.leaflet-container { font-family: var(--font-ui); }
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }