/* ============================
   ZPT ELECTRONICS · THEME
   ============================ */

/* Variables */
:root{
  --zpt-red: #E31C23;          /* rojo ZPT */
  --zpt-dark: #0C1A2B;         /* azul/negro profundo */
  --zpt-dark-2:#111E31;
  --zpt-gray:#6b7280;
  --zpt-soft:#f5f7fb;
  --zpt-black:#0b0f14;
  --zpt-success:#22c55e;
  --radius:16px;
  --shadow:0 6px 22px rgba(12,26,43,.08);
}

/* Base */
html,body{ height:100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  background: var(--zpt-soft);
  color:#0c1117;
}

/* ======= NAV superior (blanco) ======= */
.navbar-zpt{
  background:#fff;
  border-bottom:1px solid #eef2f7;
}
.brand-logo{ height:42px; width:auto; }

/* ======= Barra NEGRA de búsqueda / categorías ======= */
.catbar{
  background:#0d0d0d; color:#fff;
}
.catbar .btn-cat{
  background:var(--zpt-red); border:none; color:#fff; border-radius: var(--radius);
  padding:.65rem 1rem; font-weight:600;
}
.catbar .search-wrap{
  background:#181818; border-radius: var(--radius); padding:.35rem .5rem;
  border:1px solid #2a2a2a;
}
.catbar input{
  background:transparent; border:none; color:#e5e7eb; outline:none; width:100%;
}
.catbar .select-cat{
  background:transparent; color:#d1d5db; border:none; border-left:1px solid #2a2a2a; padding-left:.75rem;
}
.catbar .btn-search{
  background:#ffffff; color:#111827; border-radius:10px; border:none; padding:.45rem .6rem;
}

/* ======= Tabs NEGROS de categorías ======= */
.cat-tabs{
  background:#0d0d0d; color:#fff; border-top:1px solid #1f2937; border-bottom:1px solid #1f2937;
}
.cat-tabs .nav-link{
  color:#cbd5e1; padding:.75rem 1rem; border-radius:999px;
}
.cat-tabs .nav-link.active, .cat-tabs .nav-link:hover{
  background:#1f2937; color:#fff;
}

/* ======= Product card ======= */
.card-prod{
  border:none; border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; background:#fff;
  transition: transform .15s ease, box-shadow .2s ease;
}
.card-prod:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(12,26,43,.12); }
.card-prod .img-wrap{ background:#fff; display:flex; align-items:center; justify-content:center; height:210px; }
.card-prod img{ max-height:180px; object-fit:contain; }
.card-prod .sku{ color:var(--zpt-gray); font-size:.8rem; }
.card-prod .name{ font-weight:700; font-size:1rem; color:var(--zpt-dark); }
.card-prod .price{ font-weight:800; color:var(--zpt-red); font-size:1.05rem; }
.card-prod .price small{ color:#9ca3af; font-weight:500; }
.badge-discount{
  position:absolute; top:12px; left:12px; background: var(--zpt-success); color:#fff;
  font-weight:800; border-radius:999px; padding:.35rem .6rem; font-size:.8rem;
}

/* ======= Botones ======= */
.btn-zpt{
  background:var(--zpt-red); border:none; color:#fff; border-radius:12px; font-weight:700;
}
.btn-zpt:hover{ filter:brightness(.95); }
.badge-pill{ border-radius:999px; }

/* ======= FAB Carrito (botón flotante circular) ======= */
.cart-fab{
  position:fixed; right:18px; bottom:18px;
  width:56px; height:56px; border-radius:50%;
  background: var(--zpt-red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(12,26,43,.25);
  z-index: 9999; text-decoration:none;
  transition: transform .15s ease, filter .15s ease, background .2s ease;
}
.cart-fab:hover{ filter:brightness(.95); transform: translateY(-1px); }
.cart-fab i{ font-size:24px; line-height:1; }
.cart-fab .badge{
  position:absolute; top:-6px; right:-6px; font-weight:800;
}
/* Animación “bump” al agregar */
.cart-fab.bump{ animation: cart-bump .6s ease; }
@keyframes cart-bump{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.12); }
  60%{ transform: scale(0.96); }
  100%{ transform: scale(1); }
}
/* Destello breve de confirmación */
.cart-fab.flash{ background:#22c55e; }

/* ======= Helpers ======= */
.section-title{ font-weight:800; color:var(--zpt-dark-2); }
.shadow-soft{ box-shadow: var(--shadow); }
.rounded-2xl{ border-radius: var(--radius); }

/* ======= Fixes por si el CSS del browser cacheó algo ======= */
.nav-link{ cursor:pointer; }


/* Fix: forzar centrado de imagen en cards aun si usan d-block */
.card-prod .img-wrap{
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.card-prod .img-wrap img{
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}