/* ==========================================================================
   Fonte Store — loja.css (catálogo, carrinho, adesão, pesquisa, conta)
   Sem style="" inline (CSP): tudo por classe. Cor de ministério só em chips/selos,
   via classes chip-min-<slug> (variáveis abaixo). Ministério novo sem classe = neutro.
   ========================================================================== */
:root {
  --min-fonte: #01013B;  --min-fonte-texto: #FFFFFF;
  --min-now: #111111;    --min-now-texto: #FFFFFF;
  --min-legacy: #2D3039; --min-legacy-texto: #FFFFFF;
  --min-mulheres: #FCDBE2; --min-mulheres-texto: #9E3F50;
  --min-kids: #FC843C;   --min-kids-texto: #0C0C0C;
}
.chip-min-fonte { --min: var(--min-fonte); --min-txt: var(--min-fonte-texto); }
.chip-min-now { --min: var(--min-now); --min-txt: var(--min-now-texto); }
.chip-min-legacy { --min: var(--min-legacy); --min-txt: var(--min-legacy-texto); }
.chip-min-mulheres { --min: var(--min-mulheres); --min-txt: var(--min-mulheres-texto); }
.chip-min-kids { --min: var(--min-kids); --min-txt: var(--min-kids-texto); }

.loja-topo { padding: 22px 0 0; }
.loja-topo h1 { margin-bottom: .15em; }
.loja-topo p { margin: 0; }
.loja { padding-top: 18px; }
.loja .eyebrow { margin-bottom: 6px; }
.loja h2 { margin: 0 0 8px; }
.loja-intro { margin-bottom: 22px; max-width: 60ch; }
.loja-intro .muted { margin: 0; }

/* chips (filtros, tamanho, cor, pesquisa) */
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--superficie); color: var(--texto);
  border: 1.5px solid var(--borda); font-weight: 700; font-size: .875rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.chip:hover { border-color: var(--marinho); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.chip[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.chip-min::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--min, var(--texto-2)); border: 1px solid rgba(20,21,43,.25); flex: none; }
.chip-min[aria-pressed="true"] { background: var(--min, var(--marinho)); color: var(--min-txt, #fff); border-color: var(--min, var(--marinho)); }
.chip-min[aria-pressed="true"]::before { background: var(--min-txt, #fff); border-color: transparent; }
.chip-min[aria-pressed="true"]:focus-visible { outline-color: var(--marinho); outline-offset: 3px; }
.loja-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* selo de ministério (pequeno, na cor dele) */
.selo-min { display: inline-block; align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1.6;
  background: var(--min, var(--fundo)); color: var(--min-txt, var(--texto-2)); border: 1px solid var(--min, var(--borda)); }
.loja-prod .selo-min { margin-top: 10px; }
.eyebrow .selo-min { text-transform: none; letter-spacing: 0; margin-left: 6px; vertical-align: 1px; }

/* filtros */
.loja-filtros { display: grid; gap: 14px; margin-bottom: 22px; }
.loja-filtros-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.loja-filtros-grade .field { margin-bottom: 0; }
.loja-filtros-grade .label { font-size: .8125rem; margin-bottom: 4px; }
.loja-filtros-grade .select { min-height: 42px; padding-top: 6px; padding-bottom: 6px; font-size: .9375rem; }
.loja-filtros-grade .field { margin-bottom: 10px; }
.loja-filtros-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
@media (min-width: 720px) { .loja-filtros-grade { grid-template-columns: repeat(4, 1fr); } }

/* grade de produtos */
.loja-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .loja-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
@media (min-width: 1000px) { .loja-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.loja-prod { display: flex; flex-direction: column; min-width: 0; }
.loja-foto { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--borda); border-radius: var(--radius); background: #EDEFF5; cursor: pointer; }
.loja-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.loja-foto .sem-foto { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 2rem; color: #B9BDCC; }
.loja-foto .badge { position: absolute; top: 8px; left: 8px; }
.loja-prod.esgotado .loja-foto img { filter: grayscale(1); opacity: .5; }
.loja-prod.esgotado .loja-foto { cursor: default; }
.badge.badge-esgotado { color: var(--erro); border-color: var(--erro); }
.badge.badge-adesao { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.loja-nome { margin: 8px 0 2px; font-weight: 700; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.loja-prod .selo-min + .loja-nome { margin-top: 6px; }
.loja-preco { margin: 0 0 12px; color: var(--texto-2); font-weight: 600; }
.loja-prod .btn { margin-top: auto; }

/* detalhe do produto */
.loja-det-fundo { position: fixed; inset: 0; z-index: 250; background: rgba(20,21,43,.55); display: flex; align-items: flex-end; justify-content: center; }
.loja-det { position: relative; width: 100%; max-width: 760px; max-height: 92dvh; overflow-y: auto; background: var(--superficie); border-radius: 12px 12px 0 0; padding: 20px var(--gutter) 24px; box-shadow: 0 12px 40px rgba(20,21,43,.28); }
@media (min-width: 720px) { .loja-det-fundo { align-items: center; padding: 24px; } .loja-det { border-radius: 12px; padding: 28px; } }
.loja-det-grade { display: grid; gap: 20px; }
@media (min-width: 720px) { .loja-det-grade { grid-template-columns: 5fr 6fr; gap: 28px; } }
.loja-det .loja-foto { cursor: default; }
@media (max-width: 719px) { .loja-det .loja-foto { aspect-ratio: auto; height: 34dvh; min-height: 200px; } }
.loja-det .loja-foto-zoom { cursor: zoom-in; }
.loja-det h2 { margin: 0 0 6px; padding-right: 48px; }
.loja-det-fechar { position: absolute; top: 12px; right: 12px; z-index: 6; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.loja-det-fechar:hover { border-color: var(--marinho); }
.loja-det .loja-preco { font-size: 1.2rem; color: var(--texto); margin-bottom: 14px; }
.loja-desc { color: var(--texto-2); white-space: pre-line; margin-bottom: 18px; }
.loja-opcao { margin-bottom: 18px; }
.loja-opcao .label { margin-bottom: 8px; }
.loja-qtd { display: inline-flex; align-items: center; border: 1.5px solid var(--borda); border-radius: var(--radius); background: var(--superficie); }
.loja-qtd button { width: 46px; height: 46px; background: transparent; border: 0; font-size: 1.3rem; cursor: pointer; }
.loja-qtd button:disabled { opacity: .3; cursor: not-allowed; }
.loja-qtd output { min-width: 40px; text-align: center; font-weight: 800; }
.loja-det .btn-block { margin-top: 6px; }
.loja-erro { margin: 10px 0 0; color: var(--erro); font-weight: 700; font-size: .9rem; }
.loja-nota { margin: 8px 0 18px; }
body.modal-aberto { overflow: hidden; }
.loja-lupa { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--marinho); color: #fff; font-size: 1.1rem; line-height: 1; }

/* carrinho */
.loja-carrinho { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--borda); max-width: 640px; }
.loja-linha { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.loja-linha .mini { width: 52px; aspect-ratio: 4 / 5; border-radius: 6px; background: #EDEFF5; overflow: hidden; }
.loja-linha .mini img { width: 100%; height: 100%; object-fit: contain; }
.loja-linha p { margin: 0; }
.loja-linha .nome { font-weight: 700; overflow-wrap: anywhere; }
.loja-linha .det { color: var(--texto-2); font-size: .85rem; }
.loja-linha .acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.loja-linha .sub { font-weight: 800; }
.loja-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 4px; }
.loja-total strong { font-size: 1.5rem; font-weight: 800; }
.loja-barra { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--marinho); color: #fff; border-radius: var(--radius); padding: 8px 10px 8px 16px; font-weight: 700; font-size: .92rem; }
.loja-barra .btn-primary { background: #fff; color: var(--marinho); }
.loja-barra :focus-visible { outline-color: #fff; }
@media (min-width: 720px) { .loja-barra { left: auto; right: 24px; width: 400px; } }

/* reserva confirmada */
.loja-ok { max-width: 640px; text-align: center; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius); padding: 32px 18px; margin: 0 auto; }
.loja-codigo { font-size: clamp(2.4rem, 13vw, 3.8rem); font-weight: 800; line-height: 1; letter-spacing: .04em; margin: 8px 0 20px; color: var(--marinho); }
.loja-ok ul { list-style: none; padding: 0; margin: 0 auto 20px; max-width: 420px; text-align: left; color: var(--texto-2); }
.loja-ok li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.loja-ok .btn-row { margin-top: 22px; justify-content: center; }
.btn-row.justify-center { justify-content: center; }

/* adesão e pesquisa */
.loja-minhas { margin-top: 44px; max-width: 640px; }
.loja-minhas h3 { margin: 0 0 14px; font-size: 1.2rem; }
.adesao-item .det { color: var(--texto-2); font-size: .88rem; }
.adesao-item p { margin: 0; }
.loja-form { max-width: 640px; }
.loja-form fieldset { margin: 0 0 24px; }
.loja-form legend { font-size: .875rem; font-weight: 700; margin-bottom: 10px; }
.loja-faixas { display: grid; gap: 12px; margin-top: 8px; }
.loja-faixa { display: grid; gap: 6px; }
.loja-form .btn-block { margin-top: 10px; }

/* conta */
.conta-codigo { margin: 0; font-weight: 800; font-size: 1.1rem; letter-spacing: .03em; }
.conta-itens { list-style: none; margin: 6px 0; padding: 0; font-size: .9rem; color: var(--texto-2); }
.conta-itens li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.conta-res-acoes { margin-top: 4px; }
.list-item.coluna { flex-direction: column; align-items: stretch; }
.list-item .linha-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.list-item .linha-topo p { margin: 0; }
.resumo { margin: 0 0 20px; }
.resumo-linha { padding: 10px 0; border-bottom: 1px solid var(--borda); }
.resumo-linha dt { font-size: .8125rem; font-weight: 800; color: var(--texto-2); }
.resumo-linha dd { margin: 2px 0 0; }
.aviso-conta { margin: 0 0 16px; }

/* visualizador de foto em tela cheia */
.loja-zoom { position: fixed; inset: 0; z-index: 400; background: #0B0B1E; display: flex; flex-direction: column; }
.loja-zoom-palco { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.loja-zoom-palco img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; }
.loja-zoom.ampliada .loja-zoom-palco { cursor: grab; }
.loja-zoom-x { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #fff; background: var(--marinho); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.loja-zoom-ctl { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--marinho); }
.loja-zoom-ctl button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }
.loja-zoom-ctl output { min-width: 56px; text-align: center; font-weight: 800; font-size: .9rem; color: #fff; }
.loja-zoom :focus-visible { outline-color: #fff; }