/* =====================================================================
   MANA DELIVERY - FOLHA DE ESTILO
   As cores principais sao aplicadas via variaveis em :root (definidas
   automaticamente pelo app.js a partir do arquivo dados.js).
   ===================================================================== */
:root{
  --primaria:#c0392b;
  --secundaria:#e74c3c;
  --destaque:#27ae60;
  --roxo:#7b2d8b;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins','Segoe UI',Arial,sans-serif}
body{background:#f5f5f5;color:#333}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* ---------- TOPO / HERO ---------- */
.hero{position:relative;width:100%;height:200px;overflow:hidden;background:var(--primaria)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.55)}
.hero-logo{position:absolute;bottom:-45px;left:50%;transform:translateX(-50%);width:95px;height:95px;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 4px 15px rgba(0,0,0,.3);object-fit:cover}

/* ---------- INFO DA LOJA ---------- */
.store-info{background:#fff;text-align:center;padding:58px 20px 20px;border-radius:0 0 20px 20px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.store-info h1{color:var(--primaria);font-size:26px;font-weight:800;margin-bottom:10px}
.store-links{display:flex;justify-content:center;gap:12px;margin-bottom:12px}
.store-links a{width:40px;height:40px;border-radius:50%;border:2px solid #ddd;display:flex;align-items:center;justify-content:center;color:#555;font-size:16px;transition:.2s}
.store-links a:hover{border-color:var(--primaria);color:var(--primaria)}
.store-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;color:#555;font-size:13px;margin-bottom:10px}
.store-meta span{display:flex;align-items:center;gap:4px}
.badge-open{display:inline-flex;align-items:center;gap:6px;background:#e8f5e9;color:var(--destaque);font-weight:700;padding:5px 16px;border-radius:20px;font-size:13px}
.badge-open::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--destaque)}

/* ---------- BANNERS ---------- */
.promo-top{background:var(--secundaria);color:#fff;text-align:center;padding:13px;font-size:19px;font-weight:800;letter-spacing:.5px}
.delivery-banner{background:#fff;border:2px solid var(--destaque);border-radius:10px;text-align:center;padding:13px;margin:12px 16px;font-size:15px;font-weight:600;color:var(--destaque)}
.delivery-banner b{color:#333}
.promo-sub{background:#fff;border:2px solid var(--roxo);border-radius:10px;text-align:center;padding:12px 16px;margin:0 16px 12px;font-size:14px;color:#555}

/* ---------- TITULO DE SECAO ---------- */
.section-title{background:var(--secundaria);color:#fff;text-align:center;padding:14px;font-size:20px;font-weight:800}

/* ---------- GRADE DE PRODUTOS ---------- */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:16px;max-width:1200px;margin:0 auto}

/* ---------- CARD DE PRODUTO ---------- */
.product-card{background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden;display:flex;flex-direction:row;transition:transform .2s,box-shadow .2s;position:relative;cursor:pointer}
.product-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.14)}
.product-card.featured{border:3px solid var(--destaque);flex-direction:column}
.badge-best{position:absolute;top:10px;left:10px;background:#e8d5f5;color:var(--roxo);font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;z-index:2}
.card-body{padding:16px;flex:1;order:1}
.card-title{font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.3}
.card-complement{font-size:12px;color:var(--roxo);font-weight:600;margin-bottom:8px}
.card-note{background:#f0f0f0;border-radius:8px;padding:8px 10px;font-size:12px;color:#555;margin-bottom:10px;line-height:1.4}
.card-prices .de{font-size:11px;color:#888}
.price-old{font-size:13px;color:#aaa;text-decoration:line-through}
.price-new{font-size:22px;font-weight:800;color:var(--destaque)}
.card-featured-price{background:var(--destaque);color:#fff;font-size:20px;font-weight:800;padding:6px 14px;border-radius:8px;display:inline-block}
.card-stock{font-size:12px;color:#888;margin-top:6px}
.card-stock b{color:var(--secundaria)}
.card-img-wrap{width:130px;flex-shrink:0;order:2;overflow:hidden}
.product-card.featured .card-img-wrap{width:100%;height:200px;order:0}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.product-card:hover .card-img-wrap img{transform:scale(1.05)}

/* ---------- CONTADOR ---------- */
.countdown-box{background:#fff5f5;border:2px solid var(--secundaria);border-radius:14px;padding:18px;text-align:center;margin:16px}
.countdown-title{color:var(--secundaria);font-weight:700;font-size:15px;margin-bottom:12px}
.countdown-digits{display:flex;justify-content:center;gap:12px}
.digit-num{background:var(--secundaria);color:#fff;font-size:28px;font-weight:800;width:64px;height:64px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.digit-label{font-size:12px;color:#888;margin-top:4px}
.countdown-btn{display:inline-block;background:#fff;border:2px solid var(--secundaria);color:var(--secundaria);font-size:14px;font-weight:700;padding:10px 20px;border-radius:10px;margin-top:14px;transition:.2s}
.countdown-btn:hover{background:var(--secundaria);color:#fff}

/* ---------- AVALIACOES ---------- */
.reviews-section{background:#fff;padding-bottom:10px}
.reviews-header{padding:20px 16px 10px;display:flex;align-items:center;gap:14px;max-width:1200px;margin:0 auto}
.reviews-score{font-size:34px;font-weight:800}
.stars{color:#f39c12;font-size:18px}
.reviews-count{font-size:13px;color:#888}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 16px 20px;max-width:1200px;margin:0 auto}
.review-card{background:#fafafa;border:1px solid #eee;border-radius:12px;padding:14px;overflow:hidden}
.review-name{font-weight:700;font-size:14px;margin-bottom:2px}
.review-stars{color:#f39c12;font-size:13px;margin-bottom:8px}
.review-text{font-size:13px;color:#555;line-height:1.5}
.review-img{width:64px;height:64px;border-radius:8px;object-fit:cover;float:right;margin:0 0 6px 10px}

/* ---------- RODAPE ---------- */
footer{background:#222;color:#bbb;text-align:center;padding:24px;font-size:12px;margin-top:20px;line-height:1.7}
footer b{color:#fff}

/* ---------- BARRA FIXA ---------- */
.sticky-bar{position:sticky;top:0;z-index:100;background:var(--primaria);color:#fff;text-align:center;padding:10px;font-size:14px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sticky-bar a{text-decoration:underline;margin-left:6px}

/* ---------- NOTIFICACAO ---------- */
.popup-notif{position:fixed;bottom:20px;left:20px;background:#fff;border-left:4px solid var(--destaque);border-radius:10px;padding:12px 16px;box-shadow:0 4px 20px rgba(0,0,0,.15);font-size:13px;z-index:999;max-width:280px;animation:slideIn .4s ease}
.popup-notif b{color:var(--destaque);display:block;margin-bottom:2px}
.popup-notif .x{position:absolute;top:6px;right:10px;background:none;border:none;cursor:pointer;font-size:16px;color:#aaa}
@keyframes slideIn{from{transform:translateX(-120%)}to{transform:translateX(0)}}

@media(max-width:600px){
  .products-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .card-img-wrap{width:110px}
}