/* Shared store badges + QR codes, consumed by the landing page (/shared/stores.css?v=1)
   and the atlas pages (copied + content-hashed by atlas-src/build.mjs copyStatic()).
   NOTE: bump the ?v= query on the landing <link> by hand whenever this file changes,
   otherwise returning visitors keep the cached copy. */
/* Matches each store's actual badge spec (black pill, white Apple mark /
   colour Play triangle, two-line type) rather than a generic pill button. */
.badges{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:18px 0 0}
.badge{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  padding:8px 16px; border-radius:11px; min-width:164px;
  background:#000; color:#fff;
  border:1px solid rgba(255,255,255,.28);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.badge:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.5); background:#161616}
.badge svg{width:26px; height:26px; flex:none}
.badge .b-txt{display:flex; flex-direction:column; line-height:1.15; text-align:start}
.badge .b-sm{font-size:9px; font-weight:500; letter-spacing:.05em; opacity:.85; text-transform:uppercase}
.badge .b-lg{font-size:17px; font-weight:600; letter-spacing:-.015em; font-family:-apple-system,"SF Pro Display",Inter,sans-serif; margin-top:1px}

/* Desktop-only QR codes - mobile visitors already have the store in hand,
   they just tap the badge. Scanning your own screen makes no sense there. */
.qr-row{display:flex; gap:20px; justify-content:center; margin:12px 0 0}
.qr-item{display:flex; flex-direction:column; align-items:center; gap:6px}
.qr-item img{width:132px; height:132px; border-radius:8px; border:1px solid var(--line)}
@media (max-width:860px){ .qr-row{display:none} }
[dir="rtl"] .badge .b-txt { text-align:right; }