/* A store da casa (store.nash.black): só a planta da página.
   Cartão, botão, placa, chip, tipografia, espaço e raio vêm do kit do Roshan —
   nenhuma peça é reescrita aqui. */

body {
  min-height: 100vh;
  padding-bottom: var(--nash-space-8);
  /* o halo do cartão (peça do kit) se abre 24px além da casca; no celular,
     onde a margem da página é 20, isso virava 4px de rolagem lateral */
  overflow-x: clip;
}

/* A barra */

.store-nav {
  padding-top: var(--nash-space-3);
  padding-bottom: var(--nash-space-6);
}

.store-nav-bar {
  display: flex;
  align-items: center;
  gap: var(--nash-space-2);
  padding: var(--nash-space-1) var(--nash-space-3);
  border-radius: var(--nash-radius-pill);
}

.store-nav-bar .nash-badge {
  margin-left: auto;
}

/* A grade de produtos */

.store-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 380px));
  justify-content: start;
  gap: var(--nash-space-4);
}

/* O cartão: o padrão do "Track Your Delivery", medido do vídeo de referência
   (2026-10-25) a 4 px por px de CSS — casca de 380, miolo com a arte em cima, o
   texto, o divisor e o rodapé com a ação à esquerda e a nota à direita.
   sem-componente: STORE-10 — cartão, selo e botão claro nascem aqui;
   o kit só tem o cartão de vidro escuro (nash-card). Sobem ao Roshan com o "pode
   subir" do dono. As cores moram nas variáveis --sc-*, num lugar só. */

.store-cartao {
  --sc-casca: #fdfbfe;
  --sc-miolo: #fdfdff;
  --sc-borda: #ebebeb;
  --sc-arte: #edebef;
  --sc-texto: #050505;
  --sc-suave: #5e5e60;
  --sc-divisor: #eeeeee;
  --sc-botao-borda: #e9e9e9;
  --sc-selo: #111317;
  --sc-selo-texto: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 26px;
  background: var(--sc-casca);
  color: var(--sc-texto);
}

.store-cartao-miolo {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sc-borda);
  border-radius: 20px;
  background: var(--sc-miolo);
}

/* A arte: 192,5 de altura, a imagem do produto e o selo no canto */

.store-cartao-arte {
  position: relative;
  flex: none;
  height: 192.5px;
  overflow: hidden;
  background: var(--sc-arte);
}

.store-cartao-imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O selo: só o ícone em repouso; com o ponteiro (ou o foco) no cartão, abre pra
   esquerda e mostra o texto. A largura aberta vem de store.js (--store-selo-larg). */
.store-selo {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--sc-selo);
  color: var(--sc-selo-texto);
  transition: width 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.store-cartao:hover .store-selo,
.store-cartao:focus-within .store-selo {
  width: var(--store-selo-larg, 93px);
}

.store-selo-dentro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px 0 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.store-selo svg,
.store-cartao-meta svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O texto */

.store-cartao-corpo {
  flex: 1;
  padding: 22.5px 20px 27px;
}

.store-cartao-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--sc-texto);
}

.store-cartao-texto {
  max-width: 300px;
  margin: 10.8px 0 0;
  font-size: 13.5px;
  line-height: 17.25px;
  color: var(--sc-suave);
}

/* O rodapé do cartão: divisor, a ação à esquerda e a nota à direita */

.store-cartao-rodape {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  padding: 15px 22px 15px 16px;
  border-top: 1px solid var(--sc-divisor);
}

.store-cartao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-cartao-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  line-height: 1.3;
  color: var(--sc-suave);
}

.store-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--sc-botao-borda);
  border-radius: 8px;
  background: var(--sc-miolo);
  color: var(--sc-texto);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.store-botao:focus-visible {
  outline: 2px solid var(--sc-texto);
  outline-offset: 2px;
}

.store-botao:disabled {
  color: var(--sc-suave);
  cursor: not-allowed;
}

.store-botao[data-size='small'] {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

.store-replicas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .store-selo { transition: none; }
}

/* O rodapé */

.store-rodape {
  margin-top: var(--nash-space-7);
  padding-top: var(--nash-space-4);
  border-top: 1px solid var(--border-weak);
  color: var(--text-weak);
}

.store-rodape a {
  color: inherit;
}