/* =========================
   Reset e variáveis
========================= */
:root{
  --bg:#0f172a;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#7c3aed;
  --accent-2:#4f46e5;
  --success:#16a34a;
  --danger:#ef4444;
  --glass:rgba(255,255,255,0.06);
  --surface:#0b1220;
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:#200d29;color:#e6eef8;min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}

/* =========================
   Navbar
========================= */
.navbar{
  background:rgba(32,13,41,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.1);
  padding:0;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  width:100%;
}

.navbar-container{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  gap:12px;
}

.navbar-logo{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.logo-img{
  height:28px;
  width:auto;
}

.logo-text{
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}

.navbar-menu{
  display:flex;
  list-style:none;
  gap:32px;
  align-items:center;
  flex:1;
  justify-content:center;
}

.navbar-menu a{
  color:#e6eef8;
  text-decoration:none;
  font-weight:500;
  transition:color 0.2s;
  padding:8px 0;
  white-space:nowrap;
}

.navbar-menu a:hover{
  color:#7c3aed;
}

/* =========================
   Navbar Actions (Pedidos + Carrinho)
========================= */
.navbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.orders-btn-nav{
  background:rgba(255,255,255,0.08);
  color:#e6eef8;
  border:1px solid rgba(255,255,255,0.1);
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:0.9rem;
  transition:transform 0.2s,background 0.2s;
  white-space:nowrap;
}

.orders-btn-nav:hover{
  transform:translateY(-2px);
  background:rgba(124,58,237,0.2);
}

.orders-btn-nav i{
  font-size:1rem;
}

.cart-btn-nav{
  background:linear-gradient(180deg,#a855f7,#7c3aed);
  color:white;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  transition:transform 0.2s;
  white-space:nowrap;
}

.cart-btn-nav:hover{
  transform:translateY(-2px);
}

.cart-btn-nav span{
  background:rgba(255,255,255,0.2);
  padding:2px 8px;
  border-radius:12px;
  font-size:0.85rem;
}

/* =========================
   Layout Principal
========================= */
.main-layout{
  display:flex;
  max-width:1400px;
  margin:0 auto;
  padding:24px;
  gap:24px;
  min-height:0;
}

/* =========================
   Sidebar Categorias
========================= */
.sidebar-categories{
  width:250px;
  flex-shrink:0;
  background:rgba(32,13,41,0.65);
  border-radius:12px;
  padding:20px;
  height:fit-content;
  position:sticky;
  top:80px;
  border:1px solid rgba(255,255,255,0.14);
}

.sidebar-title{
  font-size:1.1rem;
  margin-bottom:16px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
}

.categories-list{
  list-style:none;
}

.category-item{
  padding:12px 16px;
  border-radius:8px;
  cursor:pointer;
  margin-bottom:8px;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  gap:10px;
  color:#94a3b8;
}

.category-item:hover{
  background:rgba(124,58,237,0.18);
  color:#fff;
}

.category-item.active{
  background:linear-gradient(90deg,rgba(124,58,237,0.2),rgba(79,70,229,0.15));
  color:#fff;
  border-left:3px solid var(--accent);
}

/* =========================
   Conteúdo Principal
========================= */
.main-content{
  flex:1;
  min-width:0;
}

.featured-section{
  margin-bottom:48px;
}

.section-title{
  font-size:1.8rem;
  margin-bottom:24px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
}

.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
}

/* =========================
   Header (legacy)
========================= */
.header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:40px 20px 20px;
  background:linear-gradient(90deg,rgba(88,38,125,0.25),rgba(45,18,64,0.22));
  border-bottom-left-radius:calc(var(--radius) + 6px);
  border-bottom-right-radius:calc(var(--radius) + 6px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  position:relative;
  z-index:90;
}
.header h1{font-size:2.4rem;font-weight:700;letter-spacing:-0.5px}
.header p{color:rgba(255,255,255,.95);opacity:.98}
.header:after{content:"";position:absolute;left:18%;right:18%;bottom:-8px;height:4px;background:linear-gradient(90deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border-radius:6px;filter:blur(2px);opacity:.5;pointer-events:none}

/* =========================
   Container (legacy grid)
========================= */
.container{
  max-width:1150px;
  margin:0 auto 60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  padding:24px 18px;
  align-items:start;
}

/* =========================
   Card de Produto
========================= */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,0.10),rgba(255,255,255,0.04));
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:transform .22s ease,box-shadow .22s ease;
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  position:relative;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(0,0,0,0.5);
}

.card img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid rgba(255,255,255,.03);
}

.card-content{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  justify-content:space-between;
}

.card-content h3{
  font-size:0.95rem;
  color:#e6eef8;
}

.card-content p{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.4;
}

.price-container{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.price{
  font-weight:700;
  font-size:1rem;
  color:var(--accent);
  margin-top:6px;
}

.price-original{
  font-size:0.85rem;
  color:#94a3b8;
  text-decoration:line-through;
}

/* Badges */
.badge-promocao{
  position:absolute;
  top:12px;
  right:12px;
  background:#ef4444;
  color:white;
  padding:6px 12px;
  border-radius:6px;
  font-size:0.85rem;
  font-weight:700;
  z-index:10;
}

.badge-vendido{
  position:absolute;
  top:12px;
  left:12px;
  background:linear-gradient(90deg,#f59e0b,#d97706);
  color:white;
  padding:6px 12px;
  border-radius:6px;
  font-size:0.85rem;
  font-weight:600;
  z-index:10;
  display:flex;
  align-items:center;
  gap:4px;
}

/* Estoque */
.stock-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:#e6eef8;
  padding:6px 10px;
  border-radius:999px;
  font-size:0.78rem;
  width:fit-content;
}
.stock-badge.out{
  background:rgba(239,68,68,0.12);
  border-color:rgba(239,68,68,0.3);
  color:#fecaca;
}

/* =========================
   Botões do Card
========================= */
.card-buttons{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.add-cart-btn{
  flex:1;
  background:linear-gradient(90deg,var(--success),#22c55e);
  color:white;
  border:none;
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  font-weight:600;
  transition:transform .16s ease,box-shadow .16s ease;
}

.add-cart-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(16,185,129,.15);
}

.add-cart-btn.in-cart{
  background:linear-gradient(90deg,#16a34a,var(--success));
  box-shadow:0 10px 28px rgba(16,185,129,.12);
}

.add-cart-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  background:rgba(255,255,255,0.06);
  color:#94a3b8;
}
.add-cart-btn[disabled]:hover{
  transform:none;
  box-shadow:none;
  background:rgba(255,255,255,0.06);
}

.info-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  width:40px;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .16s ease,box-shadow .16s ease;
}

.info-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(79,70,229,.08);
  background:rgba(255,255,255,0.04);
}

/* =========================
   Botão carrinho fixo (mobile)
========================= */
.cart-btn-fixed{
  display:none;
}

/* =========================
   Sidebar do Carrinho
========================= */
#cart-sidebar{
  position:fixed;
  right:-420px;
  top:0;
  width:380px;
  height:100%;
  background:linear-gradient(180deg,rgba(37,16,52,.98),rgba(18,7,26,.98));
  box-shadow:-2px 0 40px rgba(0,0,0,.55);
  padding:22px;
  transition:right .28s ease;
  z-index:1100;
  display:flex;
  flex-direction:column;
  border-radius:12px 0 0 12px;
}
#cart-sidebar.open{right:0}
#cart-sidebar h2{margin-bottom:14px;color:#e6eef8}

.cart-item-card{
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  padding:10px;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid rgba(255,255,255,.06);
}
.cart-item-info{display:flex;flex-direction:column;gap:4px}
.cart-item-name{font-weight:600;color:#e6eef8;word-break:break-word}
.cart-item-price{color:var(--muted);font-size:.95rem}

.empty-cart-message{
  padding:18px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  color:var(--muted);
  text-align:center;
  font-size:0.98rem;
}

.cart-item-controls{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.quantity-controls{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.quantity-controls button{
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  color:#e6eef8;
  border-radius:8px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}
.quantity-controls button:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(79,70,229,.06);background:rgba(255,255,255,.02)}
.quantity-controls button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;background:transparent}
.remove-btn{
  background:transparent;
  border:1px solid rgba(239,68,68,.18);
  color:#ffb4b4;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}
.remove-btn:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(239,68,68,.06);background:rgba(239,68,68,.04)}

#cart-subtotal{
  font-weight:700;
  margin-top:12px;
  color:#e6eef8;
  background:rgba(255,255,255,0.06);
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
}
#continue-btn,#checkout-btn{
  width:100%;
  padding:12px;
  margin-top:12px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-size:1rem;
  transition:transform .16s ease,box-shadow .16s ease;
}
#continue-btn{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,.08);color:#e6eef8}
#continue-btn:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(2,6,23,.45);background:rgba(255,255,255,.02)}
#checkout-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white}
#checkout-btn:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(79,70,229,.18)}

/* =========================
   Modal Info Produto
========================= */
#product-info-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2100;
  padding:16px;
}
#product-info-modal .pim-backdrop{position:absolute;inset:0;background:rgba(5,6,15,0.75);backdrop-filter:blur(4px)}
#product-info-modal .pim-card{
  position:relative;
  max-width:900px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
  border-radius:12px;
  box-shadow:0 26px 70px rgba(2,6,23,.65);
  display:flex;
  flex-direction:row;
  gap:0;
  transition:transform .18s cubic-bezier(.2,.9,.2,1),opacity .18s;
}
#product-info-modal .pim-media{flex:0 0 42%;max-height:420px;overflow:hidden}
#product-info-modal .pim-media img{width:100%;height:100%;object-fit:cover;display:block}
#product-info-modal .pim-body{flex:1;padding:24px 28px;display:flex;flex-direction:column;gap:14px}
#product-info-modal .pim-body h3{font-size:1.5rem;margin:0;color:#e6eef8}
#product-info-modal .pim-desc{color:var(--muted);line-height:1.6;margin-top:6px;font-size:1.02rem}
#product-info-modal .pim-price{font-weight:700;color:var(--accent);margin-top:8px;font-size:1.06rem}
#product-info-modal .pim-close{
  position:absolute;
  right:12px;
  top:8px;
  background:transparent;
  border:none;
  color:#e6eef8;
  font-size:26px;
  padding:8px;
  cursor:pointer;
  border-radius:10px;
  transition:transform .16s ease,background .16s ease;
  z-index:10;
}
#product-info-modal .pim-close:hover{transform:translateY(-3px);background:rgba(255,255,255,0.04)}

/* =========================
   Modal Checkout
========================= */
#checkout-modal{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  background:linear-gradient(180deg,rgba(2,6,23,.6),rgba(2,6,23,.8));
  z-index:1000;
}
#checkout-modal .modal-content{
  background:linear-gradient(180deg,#07102a,#091225);
  padding:26px;
  border-radius:14px;
  width:100%;
  max-width:420px;
  text-align:center;
  box-shadow:0 20px 50px rgba(2,6,23,.6);
  border:1px solid rgba(255,255,255,.03);
}
#checkout-modal input{
  width:100%;
  padding:12px;
  margin:10px 0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.04);
  background:transparent;
  color:#e6eef8;
}
#checkout-modal button{
  width:48%;
  margin-top:10px;
  border-radius:10px;
  padding:12px;
  font-size:1rem;
  border:none;
  cursor:pointer;
}
#checkout-modal button:first-child{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white}
#checkout-modal button:last-child{background:transparent;border:1px solid rgba(255,255,255,.04);color:var(--muted)}

/* =========================
   Notificações Toast
========================= */
#notification-container{
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:1400;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.notification{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  padding:12px 18px;
  border-radius:10px;
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .32s cubic-bezier(.2,.9,.2,1),transform .32s cubic-bezier(.2,.9,.2,1);
  font-size:.95rem;
  box-shadow:0 12px 36px rgba(2,6,23,.6);
  max-width:320px;
  word-break:break-word;
}
.notification.show{opacity:1;transform:translateY(0) scale(1)}
.notification.success{background:#22c55e}
.notification.error{background:#ef4444}
.notification.info{background:#3b82f6}

/* =========================
   Sidebar Meus Pedidos
========================= */
#orders-sidebar{
  position:fixed;
  right:-420px;
  top:0;
  width:400px;
  height:100%;
  background:linear-gradient(180deg,rgba(37,16,52,.98),rgba(18,7,26,.98));
  box-shadow:-2px 0 40px rgba(0,0,0,.55);
  padding:0;
  transition:right .28s ease;
  z-index:1100;
  display:flex;
  flex-direction:column;
  border-radius:12px 0 0 12px;
}
#orders-sidebar.open{right:0}

.orders-sidebar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 22px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.orders-sidebar-header h2{
  font-size:1.2rem;
  color:#e6eef8;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.close-orders-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  color:#e6eef8;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.2s;
}
.close-orders-btn:hover{background:rgba(239,68,68,0.15)}

.close-cart{
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6eef8;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.close-cart:hover{background:rgba(239,68,68,0.15)}

.orders-search{
  padding:14px 22px;
  display:flex;
  gap:8px;
}
.orders-search input{
  flex:1;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  color:#e6eef8;
  font-size:14px;
}
.orders-search input::placeholder{color:#94a3b8}
.orders-search button{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  font-size:0.85rem;
  display:flex;
  align-items:center;
  gap:6px;
  transition:transform 0.2s;
  white-space:nowrap;
}
.orders-search button:hover{transform:translateY(-2px)}

.orders-list{flex:1;overflow-y:auto;padding:0 22px 22px}
.empty-orders-message,.orders-loading{text-align:center;color:#94a3b8;padding:24px;font-size:0.95rem}

.order-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  padding:14px;
  margin-bottom:12px;
}
.order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.order-status{
  font-size:0.82rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:6px;
}
.status-pendente{background:rgba(234,179,8,0.15);color:#fbbf24;border:1px solid rgba(234,179,8,0.25)}
.status-pago{background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.25)}
.status-aguardando{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.25)}
.status-entrega{background:rgba(168,85,247,0.15);color:#c084fc;border:1px solid rgba(168,85,247,0.25)}
.order-date{font-size:0.8rem;color:#94a3b8}
.order-items{font-size:0.88rem;color:#cbd5e1;margin-bottom:6px;line-height:1.4}
.order-total{font-weight:700;color:#e6eef8;font-size:1rem;text-align:right}

/* =========================
   Botão Carrinho (legacy)
========================= */
#cart-btn{
  position:fixed;
  top:52px;
  right:28px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:white;
  padding:10px 14px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 8px 30px rgba(79,70,229,.18);
  z-index:120;
  backdrop-filter:blur(6px);
  transition:transform .22s ease,box-shadow .22s ease;
}
#cart-btn:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(79,70,229,.22)}
#cart-count{
  background:linear-gradient(90deg,var(--success),#22c55e);
  color:white;
  font-size:.8rem;
  padding:6px 8px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(16,185,129,0.16);
  border:2px solid rgba(255,255,255,0.04);
}

/* =========================
   Footer
========================= */
.site-footer{
  background:rgba(32,13,41,0.8);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:28px 24px;
  text-align:center;
  margin-top:60px;
}
.footer-content{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.discord-footer-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(88,101,242,0.15);
  border:1px solid rgba(88,101,242,0.3);
  color:#7289da;
  padding:12px 24px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  transition:transform 0.2s,box-shadow 0.2s,background 0.2s;
}
.discord-footer-link:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(88,101,242,0.2);
  background:rgba(88,101,242,0.25);
}
.discord-footer-link i{font-size:1.4rem}
.footer-copy{color:#64748b;font-size:0.85rem}


/* =========================================================
   RESPONSIVO — Tablet (max-width: 1024px)
========================================================= */
@media (max-width:1024px){
  .navbar-container{
    padding:12px 16px;
  }
  .navbar-menu{
    gap:20px;
  }
  .main-layout{
    padding:20px 16px;
    gap:20px;
  }
  .sidebar-categories{
    width:200px;
    padding:16px;
  }
  .products-grid{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:18px;
  }
  .section-title{
    font-size:1.5rem;
  }
}

/* =========================================================
   RESPONSIVO — Mobile (max-width: 768px)
========================================================= */
@media (max-width:768px){
  /* Navbar */
  .navbar-container{
    padding:10px 14px;
    gap:8px;
  }
  .navbar-menu{
    display:none;
  }
  .logo-img{
    height:26px;
  }
  .logo-text{
    font-size:1.1rem;
  }
  .orders-btn-nav .orders-btn-text{
    display:none;
  }
  .orders-btn-nav{
    padding:10px 12px;
  }
  .cart-btn-nav{
    display:none;
  }
  .navbar-actions{
    gap:6px;
  }

  /* Botão carrinho fixo mobile */
  .cart-btn-fixed{
    display:flex;
    position:fixed;
    bottom:20px;
    right:20px;
    background:linear-gradient(180deg,var(--accent),var(--accent-2));
    color:white;
    border:none;
    padding:14px;
    border-radius:50%;
    width:56px;
    height:56px;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 24px rgba(124,58,237,0.4);
    z-index:100;
    cursor:pointer;
    font-size:1.2rem;
  }

  /* Layout mobile: coluna única */
  .main-layout{
    padding:12px;
    flex-direction:column;
    gap:0;
  }

  /* Sidebar → barra horizontal de categorias */
  .sidebar-categories{
    width:100%;
    position:static;
    height:auto;
    background:transparent;
    border:none;
    border-radius:0;
    padding:0 0 12px 0;
    border-bottom:1px solid rgba(255,255,255,0.1);
    margin-bottom:16px;
  }
  .sidebar-title{
    display:none;
  }
  .categories-list{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:8px;
    padding-bottom:4px;
  }
  .categories-list::-webkit-scrollbar{display:none}
  .category-item{
    flex:0 0 auto;
    margin-bottom:0;
    border-bottom:2px solid transparent;
    border-left:none;
    padding:8px 14px;
    white-space:nowrap;
    font-size:0.9rem;
  }
  .category-item.active{
    border-left:none;
    border-bottom:2px solid var(--accent);
    background:rgba(124,58,237,0.1);
  }

  /* Grid de produtos */
  .products-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .container{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:12px;
    margin:0 auto 40px;
  }

  /* Cards */
  .card img{
    height:140px;
  }
  .card-content{
    padding:12px;
  }
  .card-content h3{
    font-size:0.9rem;
  }
  .card-content p{
    font-size:0.78rem;
  }
  .price{
    font-size:0.9rem;
  }
  .add-cart-btn,.info-btn{
    padding:8px;
    font-size:0.85rem;
  }

  /* Seções */
  .section-title{
    font-size:1.3rem;
    margin-bottom:14px;
  }
  .featured-section{
    margin-bottom:28px;
  }

  /* Header */
  .header{padding:24px 16px}
  .header h1{font-size:1.8rem}

  /* Carrinho sidebar → fullscreen */
  #cart-sidebar{
    width:100%;
    right:-100%;
    border-radius:0;
    padding:16px;
  }
  #cart-sidebar.open{right:0}

  /* Orders sidebar → fullscreen */
  #orders-sidebar{
    width:100%;
    right:-100%;
    border-radius:0;
  }

  /* Notificações acima do botão flutuante */
  #notification-container{
    bottom:80px;
    right:12px;
    left:12px;
    align-items:center;
  }
  .notification{
    width:100%;
    max-width:100%;
  }

  /* Modal info produto */
  #product-info-modal{padding:8px}
  #product-info-modal .pim-card{flex-direction:column;max-height:95vh}
  #product-info-modal .pim-media{flex-basis:auto;height:200px}
  #product-info-modal .pim-body{padding:16px}
  #product-info-modal .pim_body h3{font-size:1.2rem}
  #product-info-modal .pim-desc{font-size:0.9rem}

  /* Footer */
  .site-footer{margin-top:40px;padding:20px 16px}
  .discord-footer-link{font-size:0.95rem;padding:10px 20px}

  /* Carrinho itens */
  .cart-item-card{flex-direction:column;align-items:flex-start;gap:8px}
  .cart-item-controls{width:100%;flex-direction:row;justify-content:space-between;align-items:center}
  .quantity-controls{flex:1}

  /* Legacy */
  #cart-btn{right:14px;top:14px}
}

/* =========================================================
   RESPONSIVO — Mobile pequeno (max-width: 480px)
========================================================= */
@media (max-width:480px){
  .main-layout{
    padding:8px;
  }
  .products-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .container{
    grid-template-columns:1fr;
    padding:8px;
  }
  .card img{
    height:200px;
  }
  .navbar-container{
    padding:8px 10px;
  }
  .logo-img{
    height:24px;
  }
  .logo-text{
    font-size:1rem;
  }
  .section-title{
    font-size:1.1rem;
    margin-bottom:12px;
  }
  .cart-btn-fixed{
    width:52px;
    height:52px;
    bottom:16px;
    right:16px;
    font-size:1.1rem;
  }
  .header{padding:20px 12px}
  .header h1{font-size:1.4rem}
  .card-buttons{
    flex-direction:column;
    gap:6px;
  }
  .add-cart-btn,.info-btn{
    width:100%;
  }
  .info-btn{
    width:100%;
  }
  /* Touch targets */
  button,.add-cart-btn,.info-btn{
    min-height:44px;
    touch-action:manipulation;
  }
  input[type=text],input[type=email],input[type=tel],textarea{
    min-height:44px;
    font-size:16px;
  }
  #checkout-modal .modal-content{
    padding:20px;
    margin:0 8px;
  }
  /* Modal info */
  #product-info-modal .pim-card{max-height:85vh}
  #product-info-modal .pim-body{padding:12px}
  #product-info-modal .pim-body h3{font-size:1.05rem}
  #product-info-modal .pim-desc{font-size:0.85rem}
}