/* ============================================================
   Comparei — mercados: diretório, página da loja, atalhos da home
   ============================================================ */

/* ---------- Atalhos da tela inicial ---------- */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 18px; }
.quick-actions a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 2px; min-height: 44px; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.2; }
.quick-actions a span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-tint-2); transition: transform .15s var(--ease-out); }
.quick-actions a:active span { transform: scale(.94); }

/* ---------- Capa da loja (foto ou marca) ---------- */
.store-cover { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface-sunk); }
.store-cover--empty {
    position: relative; display: grid; place-items: center; overflow: hidden;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--store) 22%, transparent), transparent 60%),
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--store) 7%, #fff) 0 12px, color-mix(in srgb, var(--store) 11%, #fff) 12px 24px);
    color: var(--store);
}
.store-cover__initials { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.04em; color: var(--store); filter: saturate(.9); }
.store-cover--empty .icon { position: absolute; right: 12px; bottom: 10px; opacity: .55; }

/* ---------- Status aberto/fechado ---------- */
.store-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.store-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.store-status--open { color: var(--save); }
.store-status--open i { background: var(--save); box-shadow: 0 0 0 3px color-mix(in srgb, var(--save) 18%, transparent); }
.store-status--closed { color: var(--up); }
.store-status--closed i { background: var(--up); }

/* ---------- Índice de preço ---------- */
.index-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650; background: var(--surface-sunk); color: var(--ink-2); white-space: nowrap; }
.index-badge--save { background: var(--save-soft); color: var(--save); }
.index-badge--up { background: var(--up-soft); color: var(--up); }

/* ---------- Diretório ---------- */
.store-list { display: flex; flex-direction: column; gap: 14px; }
.store-tile { display: block; overflow: hidden; transition: transform .15s var(--ease-out), box-shadow .2s; }
.store-tile:active { transform: scale(.99); }
.store-tile__media { position: relative; height: 128px; }
.store-tile__flag { position: absolute; left: 12px; top: 12px; box-shadow: var(--shadow); }
.store-tile__body { padding: 12px 16px 14px; }
.store-tile__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.store-tile__title h2 { font-family: var(--font-display); font-size: 17px; font-weight: 650; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-tile__meta { font-size: 13px; color: var(--muted); margin: 2px 0 10px 30px; }
.store-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.verified { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--save-soft); color: var(--save); flex: none; }

/* Mini cartões da home */
.store-mini { width: 188px; overflow: hidden; display: flex; flex-direction: column; }
.store-mini .store-cover { height: 96px; }
.store-mini .store-cover__initials { font-size: 26px; }
.store-mini__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.store-mini__name { font-weight: 650; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-mini__meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Página da loja ---------- */
.store-hero { position: relative; height: 230px; margin: calc((var(--safe-top) + 14px) * -1) calc(var(--gutter) * -1) 0; background: var(--surface-sunk); }
.store-hero__cover { height: 100%; }
.store-hero__cover .store-cover__initials { font-size: 56px; }
.store-hero__gallery { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.store-hero__gallery::-webkit-scrollbar { display: none; }
.store-hero__photo { flex: none; width: 100%; height: 100%; padding: 0; border: 0; background: none; scroll-snap-align: start; cursor: zoom-in; }
.store-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-hero__back { position: absolute; left: 14px; top: calc(var(--safe-top) + 12px); background: rgb(20 12 32 / .38); }
.store-hero__count { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); background: rgb(20 12 32 / .55); color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(8px); pointer-events: none; }

.store-head { position: relative; margin: -26px 0 0; padding: 16px 16px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.store-head__title { display: flex; align-items: center; gap: 12px; }
.store-head__title h1 { line-height: 1.1; }
.store-head__title p { font-size: 13.5px; margin-top: 3px; }
.store-head__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }

.store-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.store-action { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 10px 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s; }
.store-action span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); }
.store-action:active { background: var(--surface-2); }
.store-action:first-child span { background: var(--tag); color: var(--on-tag); }

.store-head + .segmented { margin-top: 18px; }

.list-here { display: block; padding: 16px; background: var(--tag-soft); border-color: var(--tag-line); }
.list-here__head { display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); }
.list-here__total { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; }
.list-here__text { font-size: 13.5px; color: var(--ink-2); }

.deal-card { width: 164px; padding: 14px; }
.deal-card__avg { font-size: 11.5px; }

.store-about { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.store-about__text { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.store-about__row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.store-about__row > .icon { color: var(--brand); flex: none; margin-top: 2px; }
.store-about__row a { color: var(--info); font-weight: 600; }
.store-about__amenities { display: flex; flex-wrap: wrap; gap: 6px; }
.amenity { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.amenity .icon { color: var(--save); }
.store-about__legal { font-size: 11.5px; color: var(--muted); }

/* Lista de preços da loja: linha é um link para o produto */
a.store-price { color: inherit; }

/* ---------- Visualizador de fotos ---------- */
.photo-viewer { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; justify-content: center; background: rgb(12 8 20 / .94); animation: page-in .2s var(--ease-out) both; }
.photo-viewer img { width: 100%; max-height: 72dvh; object-fit: contain; }
.photo-viewer__close { position: absolute; top: calc(var(--safe-top) + 14px); right: 14px; }
.photo-viewer__bar { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 20px); display: flex; align-items: center; gap: 12px; padding: 0 16px; color: #fff; }
.photo-viewer__bar p { flex: 1; text-align: center; font-size: 14px; font-weight: 600; }
.photo-viewer__bar p span { display: block; font-size: 12px; font-weight: 500; opacity: .7; margin-top: 2px; }
.photo-viewer__bar .icon-btn:disabled { opacity: .3; }

@media (prefers-reduced-motion: reduce) {
    .photo-viewer, .store-tile { animation: none; transition: none; }
}

/* ---------- Leitura pela chave: link do QR Code ---------- */
.scan-key__hint { margin-top: 18px; font-size: 13px; line-height: 1.45; color: rgb(255 255 255 / .72); }
.scan-key__field--link input {
    width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-md); border: 1.5px solid rgb(255 255 255 / .18);
    background: rgb(255 255 255 / .08); color: #fff; font-family: var(--font-mono); font-size: 13px; outline: 0;
}
.scan-key__field--link input::placeholder { color: rgb(255 255 255 / .45); }
.scan-key__field--link input:focus { border-color: var(--tag); }

/* ---------- Tipo de loja (mercado, farmácia, atacarejo) ---------- */
.kind-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -6px calc(var(--gutter) * -1) 14px; padding: 2px var(--gutter); }
.kind-tabs::-webkit-scrollbar { display: none; }
.kind-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kind-tabs button.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }

/* ---------- Preço possivelmente desatualizado / missão de atualização ---------- */
.list-row__sub.is-stale { color: #8A5A00; }
.refresh-mission { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--brand-tint); border: 1px solid var(--brand-tint-2); color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.refresh-mission strong { display: block; color: var(--ink); font-size: 14.5px; }
.refresh-mission__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; background: var(--brand); color: var(--tag); }
.refresh-mission > .icon:last-child { flex: none; color: var(--brand); }