/* Simple responsive e-commerce CSS */
:root{
  --primary:#0a8f7a;
  --accent:#ff8a00;
  --bg:#f6f6f6;
  --card:#ffffff;
  --muted:#6b7280;
  --maxw:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:var(--bg); color:#111;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 16px;}
.header-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; overflow:visible;}
.site-header{background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06); position:sticky; top:0; z-index:50; overflow:visible;}
.logo{font-weight:700; color:var(--primary); text-decoration:none; font-size:1.2rem;}
.logo .dot{color:var(--accent)}
.hamburger{font-size:20px; background:transparent; border:0; display:none; cursor:pointer;}
.top-nav a{margin:0 8px; text-decoration:none; color:#333; font-weight:500;}
.cart{font-size:20px; text-decoration:none; color:#333;}
.cart-ws{display:flex; align-items:center; gap:10px; overflow:visible;}

/* Sidebar */
.sidebar{position:fixed; left:-320px; top:0; width:320px; height:100%; background:#fff; box-shadow:2px 0 10px rgba(0,0,0,0.08); transition:left .25s ease; z-index:80; overflow:auto;}
.sidebar.open{left:0;}
.sidebar .close{font-size:24px; background:transparent; border:0; float:right; margin:8px; cursor:pointer;}
.sidebar-inner{padding:16px;}
.sidebar h3{margin-top:8px;}
.cats{list-style:none; padding:0; margin:8px 0;}
.cats li{padding:6px 0;}
.cats a{text-decoration:none; color:#333;}

/* Hero */
.hero{margin:16px 0;}
.hero-inner{position:relative; border-radius:10px; overflow:hidden; display:flex; align-items:center; min-height:240px;}
.hero-inner img{width:100%; height:100%; object-fit:cover; filter:brightness(.6);}
.hero-text{position:absolute; left:24px; color:#fff; max-width:600px;}
.hero-text h1{margin:0 0 8px; font-size:2rem; line-height:1.05;}
.btn-primary{display:inline-block; background:var(--accent); color:#fff; padding:10px 16px; border-radius:6px; text-decoration:none; margin-top:8px;}

/* Produtos */
.destaques, .produtos{margin:24px 0;}
.destaques h2, .produtos h2{margin:0 0 12px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:var(--card); padding:12px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.04); text-align:center;}
.card img{width:100%; height:140px; object-fit:cover; border-radius:6px;}
.card h3{font-size:1rem; margin:8px 0 6px;}
.oldprice{text-decoration:line-through; color:var(--muted); margin:0;}
.price{font-weight:700; margin:6px 0;}
.discount{color:var(--accent); font-weight:700; margin-left:6px;}
.card-actions{display:flex; justify-content:center;}
.buy{background:var(--primary); color:#fff; border:0; padding:8px 12px; border-radius:6px; cursor:pointer;}

/* WhatsApp flutuante */
.whatsapp-float{position:fixed; right:18px; bottom:18px; background:#25D366; color:#fff; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,0.2); font-size:22px;}

/* Footer */
.site-footer{background:#fff; padding:20px 0; margin-top:24px;}
.footer-grid{display:flex; gap:24px; justify-content:space-between;}
.footer-grid h4{margin:0 0 8px;}

/* Responsivo */
@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .top-nav{display:none;}
  .hamburger{display:inline-block;}
}
@media(max-width:640px){
  .grid{grid-template-columns:repeat(1,1fr);}
  .hero-text h1{font-size:1.4rem;}
  .footer-grid{flex-direction:column;}
  .sidebar{width:100%; left:-100%;}
}

/* ========================
   CARRINHO
   ======================== */
.page-container{display:flex; gap:24px; max-width:1100px; margin:24px auto; padding:0 16px; align-items:flex-start;}
.cart-list{flex:1 1 0%; min-width:0;}
.cart-summary{flex:0 0 320px; width:320px; position:sticky; top:80px; align-self:flex-start;}

.cart-card{display:flex; gap:16px; align-items:flex-start; background:#fff; padding:16px; border-radius:14px; box-shadow:0 4px 12px rgba(15,23,42,0.06); margin-bottom:14px; border:1px solid rgba(0,0,0,0.04);}
.cart-card img{width:120px; height:90px; object-fit:cover; border-radius:10px; flex:0 0 120px;}
.cart-card .meta{flex:1 1 auto; min-width:0;}
.cart-card .meta h4{margin:0 0 6px; font-size:1rem; color:#111;}
.cart-card .meta .small{font-size:0.92rem; color:#666;}
.cart-card .price{font-weight:800; color:#0a8f7a; white-space:nowrap; flex:0 0 auto; font-size:1rem;}

.qty-control{display:flex; align-items:center; gap:8px; margin-top:8px;}
.qty-control button{width:34px; height:34px; border-radius:8px; border:1px solid #e6e6e9; background:#fff; cursor:pointer; font-weight:700;}
.qty-control input.qty{width:58px; padding:8px; border-radius:8px; border:1px solid #eee; text-align:center;}
.remove{display:block; margin-top:10px; color:#e74c3c; text-decoration:none; font-weight:600;}

.cart-summary{background:#fff; padding:20px; border-radius:14px; box-shadow:0 8px 24px rgba(12,17,23,0.06); border:1px solid rgba(0,0,0,0.04);}
.summary-row{display:flex; justify-content:space-between; align-items:center; margin:10px 0;}

.btn-checkout, .btn-copy{display:inline-block; width:100%; padding:12px; border-radius:12px; background:#0a8f7a; color:#fff; text-align:center; font-weight:800; text-decoration:none; border:0; cursor:pointer;}
.btn-copy{width:auto; padding:8px 10px; background:#111827; margin-left:8px; border-radius:8px;}

.pay-methods{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
.pay-methods label{display:flex; gap:10px; align-items:center; cursor:pointer; padding:8px; border-radius:10px; border:1px solid #f0f0f0;}
.pay-methods input[type="radio"]{transform:scale(1.06);}

#pixInfo{margin-top:12px; padding:12px; background:#fcfff8; border-radius:10px; border:1px dashed #dbeacd; display:flex; justify-content:space-between; align-items:center; gap:8px;}

.qr-box{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:12px; padding:12px; background:#fff; border-radius:10px; border:1px dashed #e6f3ee;}
.qr-box img{width:140px; height:140px; object-fit:contain; border-radius:10px; background:#fff; padding:6px;}

.customer-box{background:#fff; padding:14px; border-radius:12px; box-shadow:0 4px 12px rgba(15,23,42,0.04); margin-bottom:12px;}
.label{font-weight:700; font-size:0.95rem; margin-bottom:6px; display:block;}
.input, .select{width:100%; padding:10px; border-radius:10px; border:1px solid #eee; margin-bottom:10px; box-sizing:border-box;}
.coupon-row{display:flex; gap:8px; margin-top:6px;}
.coupon-row .input{flex:1;}
.coupon-apply{padding:10px 14px; border-radius:10px; background:#ff8a00; color:#fff; border:0; cursor:pointer;}
.text-muted{color:#666; font-size:0.92rem;}
.error{color:#c0392b; font-weight:700; margin-top:6px;}
#finalizarCompra.buy{padding:12px; border-radius:10px; font-weight:800;}

@media(max-width:980px){
  .page-container{flex-direction:column; padding:12px;}
  .cart-summary{width:100%; flex:0 0 auto; position:static; margin-top:12px;}
  .cart-card img{width:90px; height:70px; flex:0 0 90px;}
  .qr-box{flex-direction:column; align-items:center;}
  .qr-box img{width:120px; height:120px;}
}

/* ========================
   AUTH (Login / Cadastro)
   ======================== */
.auth-body{display:flex; justify-content:center; align-items:center; height:100vh; background:var(--bg);}
.auth-box{background:#fff; padding:28px; width:96%; max-width:380px; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,0.08); text-align:center;}
.auth-box h2{margin-bottom:20px; color:var(--primary);}
.auth-box input{width:100%; padding:12px; margin:8px 0; border:1px solid #ddd; border-radius:8px; font-size:1rem;}
.full{width:100%; text-align:center;}
.auth-link{margin-top:14px; font-size:0.9rem;}
.auth-link a{color:var(--accent); font-weight:bold;}

/* ========================
   USER DROPDOWN
   ======================== */
.user-wrap{position:relative;}
.user-btn{background:transparent; border:0; cursor:pointer; padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.user-btn:focus{outline:2px solid rgba(10,143,122,.15);}

.user-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:180px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  padding:8px;
  display:none;
  z-index:9999;
  border:1px solid #eee;
}
.user-dropdown.open{ display:block !important; }

.ud-item{display:block; padding:10px 12px; text-decoration:none; color:#111; border-radius:8px; font-weight:600;}
.ud-item+.ud-item{margin-top:6px;}
.ud-item:hover{background:#f6f6f8; color:var(--primary);}
.user-info{padding:8px 12px; border-bottom:1px solid #eee;}
.user-name{font-weight:700; margin-bottom:4px;}
.user-email{font-size:0.9rem; color:#666;}
.user-actions{display:flex; gap:8px; padding:8px 12px; justify-content:flex-end;}
.btn-ghost{border:1px solid #e6e6e6; background:transparent; padding:8px 10px; border-radius:8px; cursor:pointer;}
.btn-ghost:hover{background:#fafafa;}

/* ========================
   CONTATO
   ======================== */
.contact-box{display:flex; flex-direction:column; gap:16px; margin-top:30px;}
.contact-item{background:#fff; padding:18px; border-radius:12px; text-decoration:none; color:#111; font-weight:700; border:1px solid #ddd; transition:.2s;}
.contact-item:hover{transform:translateY(-2px);}