/* Store and language picker, from the Junlor site (ojafi/templates/junlor/index.html). */
.stores { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(10, 12, 14, .5); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; font-family: 'Inter', system-ui, sans-serif; color: #141414; }
.stores.open { opacity: 1; visibility: visible; }
.stores-card { width: min(820px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border-radius: 24px; transform: translateY(12px); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.stores.open .stores-card { transform: none; }
.stores-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; background: #fff; }
.stores-head h2 { margin: 0; font-size: 30px !important; line-height: 1 !important; }
.stores-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f6f5f3; color: #2a0912; font-size: 20px; cursor: pointer; }
.stores-body { padding: 18px 20px 24px; }
.stores-body h3 { margin: 6px 0 12px; font-size: 14px; font-weight: 500; color: #6e6e6e; }
.stores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px 10px; margin-bottom: 22px; }
/* The app's depth tile (MacroTile): a face over a 3px ledge in a darker tone. Pressing sinks the face onto the ledge;
   the chosen one takes the accent face with its ledge mixed 22% toward black, and white type. No hover lift. */
.store { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px; border: 0; border-radius: 16px;
  background: #F6F5F3; box-shadow: 0 3px 0 rgba(28, 28, 28, .12); margin-bottom: 3px; text-align: start; font: inherit; color: #141414; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, color .15s ease; }
.store img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.store b { display: block; font-weight: 500; font-size: 15px; color: #141414; }
.store span { display: block; color: #6e6e6e; font-size: 13px; }
.store[aria-current="true"] { background: #F2711E; color: #fff; box-shadow: 0 3px 0 #BC5717; }
.store[aria-current="true"], .store[aria-current="true"] b, .store[aria-current="true"] span { color: #fff; }
.store[aria-current="true"] span span { color: rgba(255, 255, 255, .85); }
.store img { box-shadow: 0 0 0 1px rgba(28, 28, 28, .08); }
.store:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.store:not([aria-current="true"]):hover { background: #F0EEEB; }
body.locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .stores, .stores-card { transition: none; } }
@media (max-width: 520px) { .stores-grid { grid-template-columns: 1fr 1fr; } .store { min-height: 52px; padding: 10px 12px; gap: 10px; } .store b { font-size: 14px; } }