/* Camisa 97 · Loja — visual da vitrine (tema escuro da marca) */
@font-face { font-family: 'Oswald'; src: url('../fonts/oswald.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #000000;
  --surface: #0D0D0F;
  --surface-2: #17171B;
  --surface-3: #202026;
  --border: #2B2B31;
  --azul: #273FF5;
  --azul-claro: #5468FF;
  --prata: #CFE3EA;
  --teal: #7FD9C4;
  --rose: #E8797A;
  --lilas: #D9A6E8;
  --texto: #F5F5F5;
  --texto-2: #8C8C93;
  --whats: #25D366;
  --holo: linear-gradient(115deg, #CFE3EA 0%, #273FF5 30%, #D9A6E8 60%, #7FD9C4 100%);
  --raio: 14px;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--texto);
  --bs-border-color: var(--border);
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body.loja {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--texto); text-decoration: none; }
h1, h2, h3, .titulo-pagina { font-family: 'Oswald', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.text-secundario { color: var(--texto-2) !important; }
.text-sucesso { color: var(--teal) !important; }
.text-perigo { color: var(--rose) !important; }
.link-loja { color: var(--prata); font-weight: 600; }
.link-loja:hover { color: #fff; }
.link-perigo { color: var(--rose); text-decoration: none; }
.link-perigo:hover { color: #ff9c9d; }
.titulo-pagina { font-size: clamp(22px, 4vw, 32px); font-weight: 700; margin: 0; }

/* ---------- botões ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-loja { background: var(--azul); border: 1px solid var(--azul); color: #fff; }
.btn-loja:hover, .btn-loja:focus-visible { background: var(--azul-claro); border-color: var(--azul-claro); color: #fff; }
.btn-loja:disabled { background: var(--surface-3); border-color: var(--border); color: var(--texto-2); }
.btn-contorno { border: 1px solid var(--border); color: var(--texto); background: transparent; }
.btn-contorno:hover { border-color: var(--prata); color: #fff; background: var(--surface-2); }
.btn-whats { background: var(--whats); border: 1px solid var(--whats); color: #062b14; font-weight: 700; }
.btn-whats:hover, .btn-whats:focus-visible { background: #3ee07d; border-color: #3ee07d; color: #062b14; }
.btn-whats:disabled { background: #1d7a43; border-color: #1d7a43; color: #0b3a1e; }
.btn-icone {
  width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--texto); font-size: 17px; position: relative;
}
.btn-icone:hover { border-color: var(--prata); color: #fff; }
.btn-icone-sm { background: none; border: 0; color: var(--texto-2); padding: 6px; }
.btn-icone-sm:hover { color: var(--rose); }
.carrinho-qtd {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
  background: var(--azul); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

/* ---------- topo ---------- */
.topo-aviso { background: var(--azul); color: #fff; text-align: center; font-size: 12.5px; padding: 6px 16px; }
.loja-header { position: sticky; top: 0; z-index: 1030; background: rgba(0, 0, 0, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.loja-header-linha { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.loja-marca { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.loja-marca img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.loja-marca span {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 1px; text-transform: uppercase;
  background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loja-busca { flex: 1; display: flex; max-width: 520px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.loja-busca:focus-within { border-color: var(--azul); }
.loja-busca input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--texto); padding: 10px 16px; outline: none; font-size: 14px; }
.loja-busca input::placeholder { color: var(--texto-2); }
.loja-busca button { background: transparent; border: 0; color: var(--texto-2); padding: 0 16px; }
.loja-acoes { margin-left: auto; display: flex; gap: 8px; }
.loja-cats { border-top: 1px solid var(--border); }
.loja-cats .container-xl { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; }
.loja-cats .container-xl::-webkit-scrollbar { display: none; }
.loja-cats a {
  flex-shrink: 0; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texto-2);
  border: 1px solid transparent; white-space: nowrap;
}
.loja-cats a:hover { color: #fff; }
.loja-cats a.ativo { color: #fff; border-color: var(--border); background: var(--surface-2); }
.loja-cats a.cat-promo { color: var(--rose); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border);
  background: radial-gradient(900px 400px at 85% 20%, rgba(39, 63, 245, .35), transparent 60%),
              radial-gradient(600px 300px at 10% 100%, rgba(127, 217, 196, .12), transparent 60%), var(--bg); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 40px; padding-bottom: 40px; align-items: center; }
.hero-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.hero h1 { font-size: clamp(34px, 7vw, 64px); font-weight: 700; line-height: 1.02; margin: 0 0 14px; }
.hero p { color: var(--texto-2); font-size: 16px; max-width: 520px; margin-bottom: 22px; }
.hero-camisas { position: relative; height: 220px; }
.hero-camisas .hc { position: absolute; width: 190px; height: 190px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.hc1 { left: 4%; top: 30px; transform: rotate(-12deg); }
.hc2 { left: 50%; top: 0; transform: translateX(-50%); z-index: 2; width: 220px !important; height: 220px !important; }
.hc3 { right: 4%; top: 30px; transform: rotate(12deg); }
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; padding-top: 64px; padding-bottom: 64px; }
  .hero-camisas { height: 320px; }
  .hero-camisas .hc { width: 240px; height: 240px; }
  .hc2 { width: 290px !important; height: 290px !important; }
}

/* ---------- seções ---------- */
.secao { padding: 34px 0 6px; }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.secao-titulo h2 { font-size: 24px; font-weight: 700; margin: 0; }
.grade-categorias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 576px) { .grade-categorias { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .grade-categorias { grid-template-columns: repeat(6, 1fr); } }
.tile-categoria {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--raio);
  background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, transform .15s;
}
.tile-categoria i { font-size: 22px; color: var(--azul-claro); margin-bottom: 6px; }
.tile-categoria strong { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 17px; }
.tile-categoria span { font-size: 12px; color: var(--texto-2); }
.tile-categoria:hover { border-color: var(--azul); transform: translateY(-2px); }

/* ---------- cards de produto ---------- */
.grade-produtos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .grade-produtos { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .grade-produtos { grid-template-columns: repeat(4, 1fr); } .grade-produtos.grade-3 { grid-template-columns: repeat(3, 1fr); } }
.card-produto { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); overflow: hidden; transition: border-color .15s, transform .15s; }
.card-produto:hover { border-color: #3d3d46; transform: translateY(-3px); }
.card-produto-link { display: block; height: 100%; }
.card-produto-img { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 35%, #f4f6fb 0%, #dfe3ec 100%); }
.card-produto-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; display: block; }
.card-produto-img img[src^="uploads"], .card-produto-img img[src*="/uploads/"] { object-fit: cover; padding: 0; }
.badge-promo, .badge-versao { position: absolute; top: 10px; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px; }
.badge-promo { left: 10px; background: var(--rose); color: #2a0606; }
.badge-versao { right: 10px; background: rgba(0, 0, 0, .78); color: #fff; }
.card-produto-info { padding: 12px 12px 14px; }
.card-produto-time { font-size: 11px; color: var(--texto-2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.card-produto-nome { font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-produto-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.card-produto-preco s { color: var(--texto-2); font-size: 12px; }
.card-produto-preco strong { font-size: 17px; font-weight: 800; }
.card-produto-pix { font-size: 12px; color: var(--teal); margin-top: 2px; }

.faixa-personalize {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 26px; border-radius: var(--raio); border: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(39, 63, 245, .25), rgba(217, 166, 232, .12)), var(--surface);
}
.faixa-personalize h2 { font-size: 26px; margin: 0 0 4px; }
.faixa-personalize p { margin: 0; color: var(--texto-2); max-width: 560px; }

/* ---------- catálogo ---------- */
.input-loja, .select-loja, .form-control.input-loja, .form-select.select-loja {
  background-color: var(--surface-2); border: 1px solid var(--border); color: var(--texto); border-radius: 10px;
}
.input-loja:focus, .select-loja:focus { background-color: var(--surface-2); color: var(--texto); border-color: var(--azul); box-shadow: 0 0 0 .2rem rgba(39, 63, 245, .25); }
.input-loja::placeholder { color: #6b6b72; }
.form-select.select-loja { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238C8C93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-label, .filtros label, .filtro-rotulo { font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin-bottom: 4px; display: block; }
.form-check-input { background-color: var(--surface-3); border-color: var(--border); }
.form-check-input:checked { background-color: var(--azul); border-color: var(--azul); }
.filtros { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: 16px; width: 100%; }
.filtro-bloco { margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.chip:hover { color: #fff; border-color: #44444d; }
.chip.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.offcanvas-filtros, .offcanvas-carrinho { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--texto); }
@media (min-width: 992px) { .offcanvas-filtros .offcanvas-body { padding: 0; } }
.pagination-loja .page-link { background: var(--surface); border-color: var(--border); color: var(--texto); min-width: 40px; text-align: center; }
.pagination-loja .page-item.active .page-link { background: var(--azul); border-color: var(--azul); }
.pagination-loja .page-item.disabled .page-link { background: var(--surface); color: #55555c; }
.vazio { text-align: center; color: var(--texto-2); padding: 48px 16px; }
.vazio i { font-size: 46px; margin-bottom: 14px; color: #3a3a42; display: block; }
.vazio-mini { padding: 36px 8px; }

/* ---------- produto ---------- */
.breadcrumb-loja { font-size: 13px; --bs-breadcrumb-divider-color: var(--texto-2); --bs-breadcrumb-item-active-color: var(--texto-2); }
.breadcrumb-loja a { color: var(--prata); }
.galeria-principal { position: relative; aspect-ratio: 1 / 1; border-radius: var(--raio); overflow: hidden; background: radial-gradient(circle at 50% 35%, #f4f6fb 0%, #dfe3ec 100%); }
.galeria-principal img { width: 100%; height: 100%; object-fit: contain; }
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.galeria-mini { flex: 0 0 72px; height: 72px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #e6e9f0; }
.galeria-mini.ativo { border-color: var(--azul); }
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; }
.produto-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.produto-meta span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }
.produto-meta .meta-versao { color: var(--teal); border-color: rgba(127, 217, 196, .4); }
.produto-nome { font-size: clamp(24px, 4vw, 34px); font-weight: 700; line-height: 1.1; margin-bottom: 12px; }
.produto-preco { display: flex; align-items: baseline; gap: 10px; }
.produto-preco s { color: var(--texto-2); }
.produto-preco strong { font-size: 30px; font-weight: 800; }
.produto-pix { color: var(--teal); font-size: 14px; font-weight: 600; margin-top: 2px; }
.produto-bloco { margin-top: 22px; }
.bloco-rotulo { font-weight: 700; font-size: 14px; }
.tamanhos { display: flex; flex-wrap: wrap; gap: 8px; }
.tam {
  min-width: 54px; height: 48px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--texto);
  font-weight: 700; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding: 0 10px;
}
.tam small { font-size: 9px; font-weight: 600; color: var(--rose); margin-top: 3px; text-transform: uppercase; }
.tam:hover:not(:disabled) { border-color: var(--prata); }
.tam.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.tam.ativo small { color: #fff; }
.tam.esgotado { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.qtd { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.qtd button { background: transparent; border: 0; color: var(--texto); width: 40px; }
.qtd button:hover { background: var(--surface-3); }
.qtd input { width: 44px; background: transparent; border: 0; color: var(--texto); text-align: center; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtd-sm button { width: 32px; height: 32px; font-size: 12px; }
.qtd-sm input { width: 34px; font-size: 14px; }
.produto-garantias { list-style: none; padding: 0; margin: 20px 0 0; font-size: 13px; color: var(--texto-2); }
.produto-garantias li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.produto-garantias i { color: var(--azul-claro); margin-top: 3px; width: 16px; }
.produto-descricao { margin-top: 20px; }
.produto-descricao h2 { font-size: 18px; }
.produto-descricao p { color: #c9c9cf; font-size: 14.5px; line-height: 1.6; }
.alert-loja { background: var(--surface-2); border: 1px solid var(--border); color: var(--texto); }
.barra-comprar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(13, 13, 15, .96); border-top: 1px solid var(--border); backdrop-filter: blur(8px);
}
.barra-comprar strong { display: block; font-size: 18px; }
body.loja:has(.barra-comprar) .whats-flutuante { bottom: 84px; }
body.loja:has(.barra-comprar) .loja-footer { padding-bottom: 90px; }

/* ---------- carrinho / checkout ---------- */
.painel-loja { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: 18px; }
.painel-titulo { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.carrinho-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.carrinho-item:first-child { padding-top: 0; }
.carrinho-item:last-child { border-bottom: 0; padding-bottom: 0; }
.carrinho-item img { width: 84px; height: 84px; border-radius: 10px; object-fit: contain; background: #e6e9f0; flex-shrink: 0; }
.carrinho-item-info { flex: 1; min-width: 0; }
.carrinho-item-nome { font-weight: 600; font-size: 14.5px; }
.carrinho-item-preco { font-weight: 800; white-space: nowrap; }
.opcoes-entrega, .opcoes-pagamento { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcao {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--texto-2);
}
.opcao i { color: var(--texto-2); }
.btn-check:checked + .opcao { border-color: var(--azul); color: #fff; background: rgba(39, 63, 245, .15); }
.btn-check:checked + .opcao i { color: var(--azul-claro); }
.btn-check:focus-visible + .opcao { box-shadow: 0 0 0 .2rem rgba(39, 63, 245, .35); }
.resumo { border-top: 1px solid var(--border); padding-top: 12px; font-size: 14px; display: grid; gap: 6px; }
.resumo-total { font-size: 18px; padding-top: 8px; border-top: 1px dashed var(--border); margin-top: 4px; }
.resumo-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* mini carrinho */
.mini-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mini-item img { width: 56px; height: 56px; border-radius: 8px; object-fit: contain; background: #e6e9f0; flex-shrink: 0; }
.mini-item-info { flex: 1; min-width: 0; }
.mini-item-nome { font-weight: 600; font-size: 13.5px; display: block; }
.mini-rodape { border-top: 1px solid var(--border); padding-top: 14px; }

/* confirmação */
.confirmacao { max-width: 560px; margin: 0 auto; text-align: center; }
.confirmacao-icone { width: 72px; height: 72px; border-radius: 50%; margin: 10px auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: rgba(37, 211, 102, .15); color: var(--whats); }
.confirmacao h1 { font-size: clamp(24px, 5vw, 32px); }

/* ---------- rodapé ---------- */
.faixa-beneficios { margin-top: 48px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.faixa-beneficios .container-xl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
@media (min-width: 992px) { .faixa-beneficios .container-xl { grid-template-columns: repeat(4, 1fr); } }
.beneficio { display: flex; gap: 12px; align-items: flex-start; }
.beneficio i { font-size: 20px; color: var(--azul-claro); margin-top: 2px; width: 22px; text-align: center; }
.beneficio strong { display: block; font-size: 13.5px; }
.beneficio span { font-size: 12px; color: var(--texto-2); }
.loja-footer { padding: 36px 0 24px; }
.loja-footer h4 { font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: 1px; }
.loja-footer ul { list-style: none; padding: 0; margin: 0; }
.loja-footer li { margin-bottom: 8px; font-size: 14px; }
.loja-footer li a:hover { color: var(--prata); }
.loja-footer-base { border-top: 1px solid var(--border); margin-top: 28px; padding-top: 16px; font-size: 12px; color: var(--texto-2); text-align: center; }
.whats-flutuante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1025; width: 56px; height: 56px; border-radius: 50%;
  background: var(--whats); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}
.whats-flutuante:hover { color: #fff; transform: scale(1.05); }

/* modais, avisos */
.modal-loja { background: var(--surface); color: var(--texto); border: 1px solid var(--border); }
.modal-loja .modal-header { border-color: var(--border); }
.modal-loja .table { --bs-table-bg: var(--surface); }
.toast-area { position: fixed; left: 50%; transform: translateX(-50%); top: 80px; z-index: 1090; width: min(92vw, 420px); }
.toast-alerta { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }

/* carrinho: quantidade não pode encolher no celular */
.qtd { flex-shrink: 0; }
.qtd input { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .carrinho-item { flex-wrap: wrap; }
  .carrinho-item-info { flex: 1 1 calc(100% - 96px); }
  .carrinho-item-preco { width: 100%; text-align: right; margin-top: -6px; }
}

/* área do cliente */
.btn-conta.logado { border-color: var(--azul); color: #fff; background: rgba(39, 63, 245, .25); }
.abas-loja { gap: 6px; border-bottom: 1px solid var(--border); }
.abas-loja .nav-link { color: var(--texto-2); font-weight: 600; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px; background: none; }
.abas-loja .nav-link.active { color: #fff; border-bottom-color: var(--azul); }
.stat-loja { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: 12px; text-align: center; height: 100%; }
.stat-loja span { display: block; font-size: 11px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .5px; }
.stat-loja strong { display: block; font-size: clamp(15px, 4vw, 22px); font-weight: 800; margin-top: 2px; }
.pedido-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: 14px; margin-bottom: 10px; transition: border-color .15s; }
.pedido-card:hover { border-color: var(--azul); color: var(--texto); }
.timeline { list-style: none; display: flex; padding: 0; margin: 14px 0 10px; }
.timeline li { flex: 1; position: relative; text-align: center; font-size: 10.5px; color: var(--texto-2); }
.timeline li::before { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.timeline li:first-child::before { display: none; }
.timeline li.feito::before, .timeline li.atual::before { background: var(--azul); }
.timeline-ponto { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; background: var(--surface-3); border: 2px solid var(--border); font-size: 9px; color: var(--texto-2); }
.timeline li.feito .timeline-ponto { background: var(--azul); border-color: var(--azul); color: #fff; }
.timeline li.atual .timeline-ponto { background: var(--whats); border-color: var(--whats); color: #062b14; box-shadow: 0 0 0 4px rgba(37, 211, 102, .2); }
.timeline li.atual { color: #fff; font-weight: 700; }
.timeline-rotulo { display: block; line-height: 1.2; padding: 0 2px; }
.timeline-cancelado { color: var(--rose); font-weight: 700; padding: 10px 0; }
.rastreio { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.convite-conta { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-color: rgba(39, 63, 245, .5); }

/* convite para instalar o app */
.barra-instalar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1040;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--raio);
  background: rgba(23, 23, 27, .97); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); max-width: 520px; margin: 0 auto;
}
.barra-instalar[hidden] { display: none; }
.barra-instalar img { border-radius: 10px; flex-shrink: 0; }
.barra-instalar strong { display: block; font-size: 14px; }
.barra-instalar span { display: block; font-size: 12px; color: var(--texto-2); }
body.loja:has(.barra-comprar) .barra-instalar { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* lista de desejos */
.card-produto { position: relative; }
.badge-versao { top: auto; bottom: 10px; right: auto; left: 10px; }
.btn-fav {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: #222; display: flex; align-items: center; justify-content: center; font-size: 17px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .12s;
}
.btn-fav:hover { transform: scale(1.08); }
.btn-fav.ativo { color: var(--rose); }
.btn-fav.ativo i { animation: pulsar .3s ease; }
.btn-fav-grande { position: static; flex-shrink: 0; width: 46px; height: 46px; font-size: 20px; background: var(--surface-2); color: var(--texto); border: 1px solid var(--border); box-shadow: none; }
@keyframes pulsar { 50% { transform: scale(1.3); } }

/* largura total da tela (com respiro nas laterais) */
.loja .container-xl { max-width: none; padding-left: clamp(16px, 3vw, 56px); padding-right: clamp(16px, 3vw, 56px); }
@media (min-width: 1600px) {
  .grade-produtos { grid-template-columns: repeat(5, 1fr); }
  .grade-produtos.grade-3 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2000px) {
  .grade-produtos { grid-template-columns: repeat(6, 1fr); }
  .grade-produtos.grade-3 { grid-template-columns: repeat(5, 1fr); }
}
/* foto do produto não passa do tamanho real da imagem (1200px) */
.galeria { max-width: 900px; margin-left: auto; }