/* ─── Store locator page ─── */
/* Map */
.stores-map {
  height: clamp(320px, 48vh, 520px); border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: #0f0f14;
}
.leaflet-container { font-family: inherit; background: #0f0f14; }
/* Dark map from light tiles: invert, spin the hue back, pull the colour down. */
.map-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.72) contrast(0.95) saturate(0.25); }
.store-pin span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d9dbe0 45%, #8a8d93 100%);
  border: 2px solid #0B0B0F; box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 4px 10px rgba(0,0,0,0.6);
}
.leaflet-popup-content-wrapper { background: #15151A; color: #F6F4EF; border: 1px solid rgba(166,166,170,0.3); border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.leaflet-popup-content { margin: 14px 16px; font-size: 13px; line-height: 1.5; }
.leaflet-popup-content a { color: #F6F4EF; text-decoration: underline; text-underline-offset: 3px; }
.leaflet-popup-tip { background: #15151A; }
.leaflet-popup-close-button { color: #A6A6AA !important; }
.leaflet-control-zoom a { background: #15151A !important; color: #F6F4EF !important; border-color: rgba(166,166,170,0.3) !important; }
.leaflet-control-attribution { background: rgba(11,11,15,0.7) !important; color: #A6A6AA !important; font-size: 10px; }
.leaflet-control-attribution a { color: #A6A6AA !important; }

.stores-tools { margin-top: 24px; }
.stores-tools-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.stores-search { flex: 1 1 320px; max-width: 520px; }
#store-near { flex: 0 0 auto; height: 50px; }
.stores-count { margin-top: 10px; }
.stores-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.store-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface-flat); transition: border-color var(--t-fast) var(--ease);
}
.store-card.is-active { border-color: var(--iridescent); }
.store-head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* Logo: the store's mark in white on the dark card, no tile. */
.store-logo { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; opacity: 0.92; }
.store-main { min-width: 0; }
.store-dist { display: inline-block; margin-left: 8px; color: var(--fg-mute); font-size: 12px; }
.store-show { margin-left: auto; padding-inline: 0; }
/* Store name: semi-bold, with a slow gold sheen moving through the letters. */
.store-name {
  font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  background: linear-gradient(100deg, #f1dfa6 0%, #c9a24a 22%, #fff3c4 40%, #9c7a2c 55%, #f1dfa6 70%, #dcba62 85%, #fff3c4 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: chrome-text 6s linear infinite;
}
.store-name .store-badge { -webkit-text-fill-color: var(--fg-soft); color: var(--fg-soft); background: none; }
@keyframes chrome-text { from { background-position: 0% 0; } to { background-position: 260% 0; } }
@media (prefers-reduced-motion: reduce) { .store-name { animation: none; } }
.store-badge {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-soft); border: 1px solid var(--line-strong);
}
.store-addr { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-long); color: var(--fg-soft); }
.store-links { margin-top: 8px; font-size: var(--fs-small); }
.store-links a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.store-links a:hover { border-bottom-color: var(--iridescent); }
.store-sep { margin-inline: 10px; color: var(--fg-mute); }
.store-maps { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
.btn-sm { padding: 8px 12px; font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; }
/* Two columns only when each card is wide enough for the three buttons on one line. */
@media (max-width: 980px) {
  .stores-list { grid-template-columns: 1fr; }
  .store-maps .btn-outline { flex: 1 1 0; justify-content: center; padding-inline: 8px; }
}
