/* ============================================================================
   Where to buy — shops map
   The map stage is always night-graphite, whatever the site theme: amber
   pins read as lit points on a dark board, the way a dispatcher's map does.
   ========================================================================== */
/* author display rules below must not resurrect elements the script hides */
.shops-shell [hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.shops-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding-block:clamp(var(--s-6),5vw,var(--s-8)) clamp(var(--s-5),3vw,var(--s-6))}
.shops-hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);
  pointer-events:none}
.shops-hero__inner{position:relative;display:grid;grid-template-columns:1.4fr auto;gap:var(--s-6);align-items:end}
.shops-title{font-size:clamp(34px,5.4vw,60px);text-transform:uppercase}
.shops-hero .lede{margin:var(--s-4) 0 0}
.shops-stats{display:flex;gap:var(--s-3);margin:0}
.shops-stats div{min-width:112px;padding:var(--s-4) var(--s-5);border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--bg-2)}
.shops-stats dd{margin:0;font-size:38px;font-weight:600;line-height:1;color:var(--accent-deep)}
.shops-stats dt{margin-top:6px;font-family:var(--face-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
@media (max-width:860px){
  .shops-hero__inner{grid-template-columns:1fr}
  .shops-stats{flex-wrap:wrap}
  .shops-stats div{flex:1 1 90px;min-width:0}
}

/* ---- layout ------------------------------------------------------------ */
.shops-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s-5);
  padding-block:var(--s-6)}
@media (max-width:1000px){.shops-shell{grid-template-columns:1fr}}

/* ---- the map stage ----------------------------------------------------- */
.map-card{--m-bg:#0D1116;--m-land:#1A2029;--m-land-on:#222A35;--m-land-hi:#2C3644;
  --m-edge:rgba(255,255,255,.10);--m-edge-on:rgba(242,174,28,.45);--m-ink:#E9EDF2;--m-ink-2:#8E99A7;
  position:relative;min-height:420px;aspect-ratio:1.5;border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(120% 90% at 70% 10%,rgba(242,174,28,.10),transparent 55%),
    radial-gradient(90% 80% at 10% 100%,rgba(108,155,210,.10),transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 0 0/28px 28px,
    var(--m-bg);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -30px rgba(10,13,18,.65);
  color:var(--m-ink);isolation:isolate}
@media (max-width:1000px){.map-card{aspect-ratio:1.35;min-height:0}}

.uzmap{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none}
.uzmap.is-dragging{cursor:grabbing}

.rg{fill:var(--m-land);stroke:var(--m-edge);stroke-width:.8;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;transition:fill .25s var(--ease),stroke .25s var(--ease)}
.rg--on{fill:var(--m-land-on);stroke:var(--m-edge-on)}
.rg:hover,.rg.is-hover{fill:var(--m-land-hi)}
.rg.is-picked{fill:#2E3847;stroke:#F2AE1C;stroke-width:1.4}
.uzmap.has-pick .rg:not(.is-picked){fill:#141920}

.city circle{fill:var(--m-ink-2)}
.city text{font-family:var(--face-body);font-size:11px;font-weight:500;fill:var(--m-ink-2);
  paint-order:stroke;stroke:var(--m-bg);stroke-width:3px;stroke-linejoin:round;pointer-events:none}

/* pins: drawn in screen pixels, JS rescales the group so they stay this size at every zoom */
.pin{cursor:pointer;outline:none}
.pin__glow{opacity:.65;transition:opacity .3s}
.pin__ring{fill:rgba(242,174,28,.16);stroke:#F2AE1C;stroke-width:1.2;
  transform-box:fill-box;transform-origin:center;animation:pin-pulse 2.6s var(--ease) infinite}
.pin__dot{fill:#F2AE1C;stroke:#0D1116;stroke-width:1.6}
.pin__core{fill:#1A1200}
.pin:hover .pin__dot,.pin:focus-visible .pin__dot,.pin.is-on .pin__dot{fill:#FFD27A}
.pin:hover .pin__glow,.pin.is-on .pin__glow{opacity:1}
.pin:focus-visible .pin__ring{stroke:#fff;stroke-width:2}
.pin.is-dim{opacity:.18;pointer-events:none}
.pin.is-hidden{display:none}
@keyframes pin-pulse{0%{transform:scale(.7);opacity:.95}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
.pins .pin:nth-child(3n+1) .pin__ring{animation-delay:-.9s}
.pins .pin:nth-child(3n+2) .pin__ring{animation-delay:-1.7s}

.cluster{cursor:zoom-in}
.spider line{stroke:rgba(242,174,28,.55);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}
.spider circle{fill:#F2AE1C}
.cluster__glow{fill:url(#pinGlow)}
.cluster__disc{fill:#F2AE1C;stroke:#0D1116;stroke-width:2}
.cluster__ring{fill:none;stroke:rgba(242,174,28,.5);stroke-width:1.2}
.cluster text{font-family:var(--face-mono);font-size:12px;font-weight:600;fill:#1A1200;
  text-anchor:middle;dominant-baseline:central;pointer-events:none}
.cluster:hover .cluster__disc,.cluster.is-on .cluster__disc{fill:#FFD27A}

/* ---- overlays ---------------------------------------------------------- */
.map-hud{position:absolute;left:16px;top:16px;z-index:2;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 14px;border-radius:999px;background:rgba(13,17,22,.72);
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);font-size:14px;font-weight:600;
  max-width:calc(100% - 140px)}
.map-hud__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-hud__count{min-width:28px;height:28px;padding:0 8px;display:grid;place-items:center;border-radius:999px;
  background:#F2AE1C;color:#1A1200;font-size:13px}

.map-ctrl{position:absolute;right:16px;top:16px;z-index:2;display:grid;border-radius:12px;overflow:hidden;
  background:rgba(13,17,22,.72);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.map-ctrl button{width:var(--tap);height:var(--tap);border:0;background:transparent;color:var(--m-ink);
  font-size:20px;line-height:1;cursor:pointer;transition:background .2s}
.map-ctrl button+button{border-top:1px solid rgba(255,255,255,.08)}
.map-ctrl button:hover{background:rgba(255,255,255,.08)}

.map-legend{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;flex-wrap:wrap;gap:6px 16px;
  font-size:12px;color:var(--m-ink-2);pointer-events:none}
.map-legend span{display:inline-flex;align-items:center;gap:8px}
.lg-pin{width:10px;height:10px;border-radius:50%;background:#F2AE1C;box-shadow:0 0 0 3px rgba(242,174,28,.22)}
.lg-cluster{width:18px;height:18px;border-radius:50%;background:#F2AE1C;color:#1A1200;font:600 10px/18px var(--face-mono);
  text-align:center;font-style:normal}
@media (max-width:560px){.map-legend{display:none}}

.shop-card{position:absolute;z-index:3;width:min(300px,calc(100% - 32px));padding:16px 16px 14px;
  border-radius:14px;background:rgba(18,23,30,.94);border:1px solid rgba(242,174,28,.35);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.8);backdrop-filter:blur(10px);color:var(--m-ink);
  transform-origin:var(--ox,50%) var(--oy,100%);animation:card-in .22s var(--ease)}
@keyframes card-in{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.shop-card__region{margin:0 0 4px;font-family:var(--face-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#F2AE1C}
.shop-card__title{font-size:22px;text-transform:uppercase;padding-right:24px}
.shop-card__addr{margin:6px 0 14px;color:var(--m-ink-2);font-size:14px;line-height:1.45}
.shop-card__go{width:100%}
.shop-card__x{position:absolute;right:8px;top:8px;width:32px;height:32px;border:0;border-radius:8px;
  background:transparent;color:var(--m-ink-2);cursor:pointer}
.shop-card__x:hover{background:rgba(255,255,255,.08);color:var(--m-ink)}

/* ---- side panel -------------------------------------------------------- */
.shop-panel{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--bg);overflow:hidden}
/* the map card sets the row height; the panel fills exactly that and scrolls inside */
@media (min-width:1001px){.shop-panel{height:0;min-height:100%}}
@media (max-width:1000px){.shop-panel{max-height:520px}}
.shop-panel__tools{display:grid;gap:10px;padding:14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.shop-search{position:relative;display:block}
.shop-search svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);
  fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.shop-search input{width:100%;height:var(--tap);padding:0 12px 0 38px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--bg)}
.shop-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.region-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 12px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font-weight:600;font-size:14px}
.region-chip button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.region-chip button:hover{background:color-mix(in srgb,var(--accent) 25%,transparent)}

.shop-list{overflow:auto;padding:6px 0 10px;overscroll-behavior:contain}
.shop-group__head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;
  margin:0;padding:10px 16px 6px;background:var(--bg);font-family:var(--face-mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.shop-group__head b{color:var(--accent-deep)}
.shop-group ul{list-style:none;margin:0;padding:0 8px}
.shop-item{position:relative;display:flex;align-items:stretch;border-radius:12px;transition:background .2s}
.shop-item:hover,.shop-item.is-on{background:var(--bg-2)}
.shop-item.is-on{box-shadow:inset 3px 0 0 var(--accent)}
.shop-item__link{flex:1;display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:1px;
  padding:9px 6px 9px 12px;min-width:0}
.shop-item__loc{font-weight:600}
.shop-item__addr{grid-column:1;color:var(--ink-2);font-size:14px;line-height:1.4}
.shop-item__go{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:12px;font-weight:600;
  white-space:nowrap;color:var(--accent-deep);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.shop-item:hover .shop-item__go,.shop-item__link:focus-visible .shop-item__go{opacity:1;transform:none}
.shop-item__locate{flex:none;width:var(--tap);border:0;border-radius:10px;background:transparent;
  color:var(--ink-3);cursor:pointer}
.shop-item__locate svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.shop-item__locate:hover{color:var(--accent-deep);background:var(--bg-3)}
.shop-empty{padding:24px 16px;color:var(--ink-2);text-align:center}
@media (hover:none){.shop-item__go{opacity:1;transform:none}}

/* ---- closing band ------------------------------------------------------ */
.shops-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);
  margin-block:var(--s-4) var(--s-6);padding:var(--s-6);border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg-2)}
.shops-cta .lede{margin:var(--s-2) 0 0}
.shops-cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0}
.map-credit{margin-top:0;padding-bottom:var(--s-5)}

/* ---- home-page teaser --------------------------------------------------- */
.shops-teaser{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s-6);align-items:center}
.shops-teaser__map{position:relative;display:block;aspect-ratio:1.55;border-radius:var(--radius-lg);overflow:hidden;
  background:radial-gradient(120% 90% at 70% 10%,rgba(242,174,28,.12),transparent 55%),#0D1116;
  box-shadow:0 30px 60px -30px rgba(10,13,18,.65);transition:transform .35s var(--ease)}
.shops-teaser__map:hover{transform:translateY(-4px)}
.shops-teaser__map svg{position:absolute;inset:6% 5% 12%;width:90%;height:82%}
.shops-teaser__map .rg{fill:#1A2029;stroke:rgba(255,255,255,.1)}
.shops-teaser__map .rg--on{fill:#222A35;stroke:rgba(242,174,28,.45)}
.shops-teaser__map .dot{fill:#F2AE1C;stroke:#0D1116;stroke-width:1.5}
.shops-teaser__map .dot-glow{fill:url(#teaserGlow)}
.shops-teaser__badge{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;
  background:rgba(13,17,22,.75);color:#E9EDF2;font-size:14px;font-weight:600;backdrop-filter:blur(8px)}
.shops-teaser__badge b{color:#F2AE1C}
@media (max-width:860px){.shops-teaser{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .pin__ring{animation:none;opacity:.5}
  .shop-card{animation:none}
}

/* ---- phones (kept last so it wins over the component rules above) ---- */
@media (max-width:560px){
  .map-card{aspect-ratio:1.2}
  .map-ctrl{top:auto;bottom:12px;right:12px;display:flex}
  .map-ctrl button{width:40px;height:40px}
  .map-ctrl button+button{border-top:0;border-left:1px solid rgba(255,255,255,.08)}
  .map-hud{left:12px;top:12px;max-width:calc(100% - 24px);font-size:13px}
  .shop-item__go-txt{display:none}
  .shops-stats div{padding:var(--s-3) var(--s-4)}
  .shops-stats dd{font-size:30px}
  .shops-stats dt{letter-spacing:.06em}
}
.uzmap.no-city-labels .city text{display:none}