/* ===================================================
   VITRINE • S.S.White Duflex — Mobile-first
=================================================== */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',system-ui,sans-serif; }
body { background:#eef2f6; color:#1c2733; padding-bottom:40px; }

/* ===== CABEÇALHO ===== */
.topo {
  position:sticky; top:0; z-index:50;
  background:linear-gradient(135deg,#0a5ca8,#084a87); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:14px 16px; box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.topo h1 { font-size:18px; }

/* ===== BOTÃO VOLTAR ===== */
.btn-voltar {
  background:rgba(255,255,255,.18); color:#fff; border:none;
  border-radius:30px; padding:8px 14px; font-size:.9rem; font-weight:bold;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:.2s;
}
.btn-voltar:hover { background:rgba(255,255,255,.32); }

/* ===== CARRINHO (ícone topo) ===== */
.btn-carrinho {
  background:#fff; color:#0a5ca8; border:none; border-radius:30px;
  padding:8px 14px; font-size:.95rem; font-weight:800; cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:.15s;
}
.btn-carrinho:active { transform:scale(.95); }

/* ===== BUSCA ===== */
.barra-busca { padding:14px 16px; }
.barra-busca input {
  width:100%; padding:12px 14px; border:1px solid #cfd8e3;
  border-radius:12px; font-size:14px; outline:none;
}
.barra-busca input:focus { border-color:#0a5ca8; }

/* ===== GRID DE PRODUTOS ===== */
.grid-produtos {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px; padding:0 16px;
}
.carregando { grid-column:1/-1; text-align:center; color:#9aa7b4; padding:30px; }

/* ===== CARD ===== */
.card {
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.06); display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s;
}
.card:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.12); }

.card-img-wrap { position:relative; background:#f4f7fa; aspect-ratio:1/1; }
.card-img { width:100%; height:100%; object-fit:contain; padding:8px; }

.selo-promo {
  position:absolute; top:8px; left:8px; z-index:2;
  background:#e74c3c; color:#fff; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:20px;
}

.card-corpo { padding:12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-codigo { font-size:11px; color:#9aa7b4; }
.card-nome { font-size:14px; font-weight:700; line-height:1.3; flex:1; }

/* A classe .card-preco foi removida daqui */

.btn-add {
  background:#0a5ca8; color:#fff; border:none; border-radius:10px;
  padding:10px; font-size:14px; font-weight:700; cursor:pointer; transition:.15s;
}
.btn-add:hover { background:#084a87; }
.btn-add:active { transform:scale(.97); }

/* ===== MODAIS ===== */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  padding:16px; z-index:200;
}
.modal.oculto { display:none; }
.modal-conteudo {
  background:#fff; border-radius:18px; padding:22px; max-width:420px;
  width:100%; max-height:90vh; overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.4); animation:surge .3s ease;
}
@keyframes surge { from{opacity:0;transform:translateY(20px) scale(.96)} to{opacity:1;transform:none} }
.modal-conteudo h2 { color:#0a5ca8; font-size:20px; margin-bottom:6px; }
.modal-conteudo h3 { font-size:15px; margin:14px 0 8px; }

/* ===== ITENS DO CARRINHO ===== */
.item-carrinho {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid #eef2f6;
}
.item-info { flex:1; font-size:14px; font-weight:600; }
.item-info small { display:block; font-weight:400; color:#9aa7b4; font-size:12px; }

.qtd-controle { display:flex; align-items:center; gap:8px; }
.qtd-controle button {
  width:30px; height:30px; border:1px solid #cfd8e3; background:#f4f7fa;
  border-radius:8px; font-size:18px; font-weight:700; cursor:pointer; color:#0a5ca8;
}
.qtd-controle span { min-width:20px; text-align:center; font-weight:700; }
.btn-remover { background:none; border:none; font-size:18px; cursor:pointer; }

.vazio { text-align:center; color:#9aa7b4; padding:20px; font-size:14px; }

/* ===== TOTAL E AÇÕES ===== */
.modal-total {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding-top:12px; border-top:2px solid #eef2f6; font-size:16px;
}
.modal-total strong { font-size:20px; color:#27ae60; }

.modal-acoes { display:flex; gap:10px; margin-top:18px; }
.btn-primario, .btn-secundario {
  flex:1; border:none; border-radius:10px; padding:13px;
  font-size:14px; font-weight:700; cursor:pointer; transition:.15s;
}
.btn-primario { background:#27ae60; color:#fff; }
.btn-primario:hover { background:#229954; }
.btn-secundario { background:#ecf0f1; color:#2c3e50; }
.btn-secundario:active, .btn-primario:active { transform:scale(.97); }

/* ===== RESPONSIVO (desktop) ===== */
@media (min-width:600px) {
  .grid-produtos { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
}