*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;color:#111}
.container{max-width:1100px;margin:0 auto;padding:16px}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.logo{font-size:1.2rem;font-weight:800}
.searchbar{display:flex;gap:8px;align-items:center}
.searchbar input, .searchbar select{padding:10px;border:1px solid #ddd;border-radius:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px}
.card{border:1px solid #eee;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.card img{width:100%;height:160px;object-fit:cover;background:#f6f6f6}
.card .body{padding:12px;display:flex;flex-direction:column;gap:8px}
.price{font-weight:800}
.price s{color:#999;font-weight:400;margin-left:6px}
.badge{display:inline-block;background:#f5f5f5;border:1px solid #eee;border-radius:999px;padding:4px 10px;font-size:.8rem;color:#333}
.btn{appearance:none;border:0;border-radius:12px;padding:10px 12px;background:#111;color:#fff;cursor:pointer}
footer{padding:20px 0;color:#666;font-size:.9rem}
.empty{padding:20px;border:1px dashed #ddd;border-radius:12px;text-align:center;color:#666}
.admin-nav{display:flex;gap:10px;margin:10px 0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eee;padding:8px;text-align:left}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row .full{grid-column:1/-1}
input[type=text],input[type=number],textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:12px}
label{font-size:.9rem;color:#333}
@media(max-width:800px){.form-row{grid-template-columns:1fr}}



/* ===== Selo "Loja aberta/fechada" no canto direito do header ===== */
.header{ position: relative !important; }

.header .store-status,
h1 + .store-status{
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;

  display: inline-flex !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  z-index: 5 !important;

  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset !important;
}
.store-status .dot{
  width:10px !important; height:10px !important; border-radius:50% !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.35) inset !important;
}
.store-status.open{ background:#ff6b6b !important; }
.store-status.open .dot{ background:#22c55e !important; }
.store-status.closed{ background:#e53945 !important; }
.store-status.closed .dot{ background:#ff5c80 !important; }

@media (max-width: 600px){
  .header .store-status{ top: 10px !important; right: 10px !important; }
}