/* ===============================
   VARIÁVEIS — TEMA ESCURO (padrão)
================================= */
:root,
[data-theme="dark"]{
  --bg-primary: #0a0a0f;
  --bg-secondary: #14141c;
  --bg-card: #1a1a24;
  --border: #2a2a38;
  --text-primary: #f2f2f7;
  --text-secondary: #9a9aab;
  --accent-holo: linear-gradient(135deg, #ff6ec4, #7873f5, #4facfe, #ff6ec4);
  --accent-gold: #ffd76b;
  --success: #4ade80;
  --overlay-bg: rgba(0,0,0,0.75);
  --drawer-overlay: rgba(0,0,0,0.6);
  --holo-glow-1: rgba(120,115,245,0.08);
  --holo-glow-2: rgba(255,110,196,0.08);
  --radius: 14px;
}

/* ===============================
   VARIÁVEIS — TEMA CLARO
================================= */
[data-theme="light"]{
  --bg-primary: #f5f5f8;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --border: #e2e2ea;
  --text-primary: #1a1a24;
  --text-secondary: #6b6b78;
  --accent-holo: linear-gradient(135deg, #ff6ec4, #7873f5, #4facfe, #ff6ec4);
  --accent-gold: #d69a00;
  --success: #16a34a;
  --overlay-bg: rgba(20,20,30,0.5);
  --drawer-overlay: rgba(20,20,30,0.4);
  --holo-glow-1: rgba(120,115,245,0.06);
  --holo-glow-2: rgba(255,110,196,0.06);
}

/* ===============================
   RESET & BASE
================================= */
*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, sans-serif;
  line-height: 1.5;
  transition: background 0.3s, color 0.3s;
}

a{ text-decoration:none; color:inherit; }
button{ cursor:pointer; border:none; font-family:inherit; }

/* Efeito "holo" sutil de fundo */
body::before{
  content:"";
  position:fixed;
  top:-30%; left:-30%;
  width:160%; height:160%;
  background: radial-gradient(circle at 20% 20%, var(--holo-glow-1), transparent 40%),
              radial-gradient(circle at 80% 70%, var(--holo-glow-2), transparent 40%);
  pointer-events:none;
  z-index:0;
}

/* ===============================
   HEADER / NAVBAR
================================= */
header{
  position: sticky; top:0; z-index:100;
  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s, border-color 0.3s;
}
.nav-container{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 1.6rem; font-weight:800;
  background: var(--accent-holo);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing: 0.5px;
}

.logo-img{
  height: 90px;   /* aumente esse valor até ficar do tamanho que quer */
  width: auto;
  max-width: none;
  display: block;
}

@media (max-width: 600px){
  .logo-img{ height: 44px; }
}

.header-actions{
  display:flex; align-items:center; gap:12px;
}

/* Botão de alternância de tema */
.theme-toggle{
  background: var(--bg-card);
  border:1px solid var(--border);
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  transition: 0.25s;
}
.theme-toggle:hover{
  border-color: var(--accent-gold);
  transform: rotate(15deg);
}

.cart-btn{
  position:relative;
  background: var(--bg-card);
  border:1px solid var(--border);
  color: var(--text-primary);
  padding:10px 18px;
  border-radius: 999px;
  font-weight:600;
  display:flex; align-items:center; gap:8px;
  transition: 0.25s;
}
.cart-btn:hover{ border-color: var(--accent-gold); transform: translateY(-1px); }
.cart-count{
  background: var(--accent-gold);
  color:#000;
  border-radius:999px;
  font-size:0.75rem;
  padding: 1px 7px;
  font-weight:700;
}

/* Filtros de categoria */
.filters{
  max-width:1280px; margin:0 auto;
  display:flex; gap:10px; padding: 0 24px 16px;
  overflow-x:auto;
}
.filter-btn{
  background: var(--bg-secondary);
  border:1px solid var(--border);
  color: var(--text-secondary);
  padding:8px 18px;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:600;
  white-space:nowrap;
  transition:0.2s;
}
.filter-btn:hover{ color: var(--text-primary); }
.filter-btn.active{
  background: var(--accent-holo);
  color:#fff;
  border-color: transparent;
}

/* ===============================
   HERO
================================= */
.hero{
  max-width:1280px; margin:0 auto;
  padding: 60px 24px 30px;
  text-align:center;
}
.hero h1{
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight:800;
  margin-bottom:12px;
}
.hero h1 .highlight{
  background: var(--accent-holo);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color: var(--text-secondary); max-width:600px; margin:0 auto; }

/* ===============================
   GRID DE PRODUTOS
================================= */
.catalog{
  max-width:1280px; margin:0 auto;
  padding: 20px 24px 80px;
}
.catalog-title{
  font-size:1.4rem; font-weight:700; margin-bottom:20px;
}
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:22px;
}

.card{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
  transition: transform 0.25s, box-shadow 0.25s, background 0.3s, border-color 0.3s;
  cursor:pointer;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(120,115,245,0.2);
}

/* Faixa holográfica no topo do card ao hover — simula brilho de carta */
.card::before{
  content:"";
  position:absolute; inset:0;
  background: var(--accent-holo);
  opacity:0;
  mix-blend-mode: overlay;
  transition:0.3s;
  pointer-events:none;
  z-index:2;
}
.card:hover::before{ opacity:0.25; }

.card-img-wrap{
  position:relative;
  aspect-ratio: 3/4;
  background: var(--bg-secondary);
  overflow:hidden;
}
.card-img-wrap img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 0.4s;
}
.card:hover .card-img-wrap img{ transform: scale(1.06); }

.badge{
  position:absolute; top:10px; left:10px;
  background: rgba(0,0,0,0.7);
  color:#fff;
  padding:3px 10px;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:700;
  border:1px solid var(--border);
}
[data-theme="light"] .badge{ background: rgba(20,20,30,0.75); }
.badge.rarity{ color: var(--accent-gold); }
.badge.condition{ top:auto; bottom:10px; left:10px; color: var(--success); }

.card-info{ padding:14px; }
.card-info h3{ font-size:0.95rem; font-weight:700; margin-bottom:4px; }
.card-info .set-name{ font-size:0.78rem; color: var(--text-secondary); margin-bottom:10px; }

.price-row{
  display:flex; align-items:center; justify-content:space-between;
}
.price{ font-size:1.15rem; font-weight:800; color: var(--text-primary); }
.price small{ font-size:0.7rem; color: var(--text-secondary); font-weight:400; }

.add-btn{
  width:100%; margin-top:12px;
  background: var(--bg-secondary);
  border:1px solid var(--border);
  color: var(--text-primary);
  padding:10px;
  border-radius:10px;
  font-weight:700;
  font-size:0.85rem;
  transition:0.2s;
  z-index:3;
  position:relative;
}
.add-btn:hover{
  background: var(--accent-holo);
  color:#fff;
  border-color:transparent;
}
.add-btn.added{ background: var(--success); color:#000; }

/* ===============================
   MODAL DE PRODUTO (Página de produto)
================================= */
.modal-overlay{
  position:fixed; inset:0;
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
  display:none;
  align-items:center; justify-content:center;
  z-index:1000;
  padding:20px;
}
.modal-overlay.active{ display:flex; }

.product-modal{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  max-width:850px; width:100%;
  max-height:90vh; overflow-y:auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  transition: background 0.3s, border-color 0.3s;
}
@media(max-width:700px){ .product-modal{ grid-template-columns:1fr; } }

.modal-img{
  background: var(--bg-secondary);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-img img{ max-width:100%; border-radius:10px; }

.modal-details{ padding:30px; position:relative; }
.modal-close{
  position:absolute; top:16px; right:16px;
  background: var(--bg-secondary);
  width:32px; height:32px; border-radius:50%;
  color: var(--text-primary); font-size:1.1rem;
}
.modal-details h2{ font-size:1.4rem; margin-bottom:6px; }
.modal-details .set-name{ color: var(--text-secondary); font-size:0.9rem; margin-bottom:16px; }

.spec-list{ list-style:none; margin: 16px 0; }
.spec-list li{
  display:flex; justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  font-size:0.9rem;
}
.spec-list li span:first-child{ color: var(--text-secondary); }
.spec-list li span:last-child{ font-weight:600; }

.protection-box{
  background: var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  margin:16px 0;
  font-size:0.85rem;
  color: var(--text-secondary);
  display:flex; gap:10px; align-items:flex-start;
}
.protection-box .icon{ font-size:1.3rem; }

.modal-price{ font-size:1.8rem; font-weight:800; margin: 14px 0; color: var(--text-primary); }
.modal-add-btn{
  width:100%; padding:14px;
  background: var(--accent-holo);
  color:#fff; font-weight:800;
  border-radius:10px; font-size:1rem;
}

/* ===============================
   CARRINHO LATERAL (Drawer)
================================= */
.cart-drawer{
  position:fixed; top:0; right:-420px;
  width:100%; max-width:420px; height:100%;
  background: var(--bg-secondary);
  border-left:1px solid var(--border);
  z-index:1100;
  transition: right 0.35s ease, background 0.3s, border-color 0.3s;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ right:0; }

.cart-header{
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.cart-header h2{ font-size:1.2rem; }
.cart-header button{
  background:none; color: var(--text-secondary); font-size:1.4rem;
}

.cart-items{
  flex:1; overflow-y:auto; padding: 10px 24px;
}
.cart-item{
  display:flex; gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.cart-item img{
  width:60px; height:80px; object-fit:cover; border-radius:6px;
  background: var(--bg-card);
}
.cart-item-info{ flex:1; }
.cart-item-info h4{ font-size:0.9rem; margin-bottom:4px; color: var(--text-primary); }
.cart-item-info .cart-price{ color: var(--accent-gold); font-weight:700; font-size:0.9rem; }
.qty-controls{
  display:flex; align-items:center; gap:8px; margin-top:6px;
}
.qty-controls button{
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border);
  width:24px; height:24px; border-radius:6px; font-size:0.9rem;
}
.remove-item{
  color:#ff6b6b; font-size:0.78rem; margin-top:6px; background:none;
}
.empty-cart{ text-align:center; color: var(--text-secondary); padding:60px 20px; }

.cart-footer{
  padding:20px 24px;
  border-top:1px solid var(--border);
}
.subtotal-row{
  display:flex; justify-content:space-between;
  font-size:1.1rem; font-weight:700; margin-bottom:16px;
  color: var(--text-primary);
}
.whatsapp-btn{
  width:100%; padding:15px;
  background: #25D366;
  color:#fff; font-weight:800; font-size:1rem;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:0.2s;
}
.whatsapp-btn:hover{ background:#1ebe57; }

.drawer-overlay{
  position:fixed; inset:0; background: var(--drawer-overlay);
  z-index:1050; display:none;
}
.drawer-overlay.active{ display:block; }

/* ===============================
   TOAST (Notificação "adicionado")
================================= */
.toast{
  position:fixed; bottom:24px; left:50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-card);
  border:1px solid var(--success);
  color: var(--text-primary);
  padding:12px 22px;
  border-radius:10px;
  font-weight:600;
  z-index:2000;
  opacity:0;
  transition: 0.3s;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ===============================
   FOOTER
================================= */
footer{
  background: var(--bg-secondary);
  border-top:1px solid var(--border);
  padding: 50px 24px 30px;
  margin-top:40px;
  transition: background 0.3s, border-color 0.3s;
}
.footer-container{
  max-width:1280px; margin:0 auto;
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap:40px;
}
@media(max-width:700px){ .footer-container{ grid-template-columns:1fr; } }

.shipping-box h3{
  font-size:1.1rem; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
  color: var(--text-primary);
}
.shipping-features{
  display:grid; gap:14px;
}
.shipping-feature{
  display:flex; gap:12px; align-items:flex-start;
  font-size:0.88rem; color: var(--text-secondary);
}
.shipping-feature .icon{ font-size:1.4rem; }
.shipping-feature b{ color: var(--text-primary); display:block; margin-bottom:2px; }

.footer-contact h3{ margin-bottom:14px; font-size:1.1rem; color: var(--text-primary); }
.footer-contact p{ color: var(--text-secondary); font-size:0.88rem; margin-bottom:8px; }
.footer-bottom{
  text-align:center; margin-top:40px;
  color: var(--text-secondary); font-size:0.8rem;
  border-top:1px solid var(--border); padding-top:20px;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 3px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: girar 1s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}