:root{
  --bg:#000;
  --fg:#e5e5e5;
  --muted:#9ca3af;
  --card:#0a0a0a;
  --border:#1f2937;
}

/* Reset base */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  background:var(--bg);   /* ← ESTE ES EL FONDO QUE HABÍAS PERDIDO */
  color:var(--fg);
  font-family:'Montserrat',sans-serif;
  font-weight:400;
  min-height:100%;
}

/* Tipografías */
h1,h2,h3{
  font-weight:700;
}

.card-title{
  font-weight:600;
}

/* Inputs y botones */
button,select,input{
  background:#0f0f0f;
  border:1px solid var(--border);
  color:var(--fg);
  border-radius:10px;
  padding:8px 10px;
}

select{padding:8px 12px}
input[type="text"]{padding:8px 12px}

/* ================== TOPBAR ================== */
.topbar{
  background:#000 !important;
  color:#fff;
}

#topbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 12px;
  gap:8px;
}

.logo img{
  max-height:44px;
}

/* ================== LAYOUT ================== */
.container{
  max-width:1100px;
  margin:28px auto;
  padding:0 16px;
}

/* ================== RUBROS ================== */
.rubros-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.rub-btn{
  appearance:none;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 16px;
  background:#0f0f0f;
  color:#e5e5e5;
  cursor:pointer;
  text-decoration:none;
  transition:transform .06s ease,opacity .2s;
}

.rub-btn:hover{
  opacity:.9;
  transform:translateY(-1px);
}

/* ================== GRID ================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}

/* ================== CARD ================== */
.card{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background:var(--card);
  transition:transform .15s ease, box-shadow .2s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(0,0,0,.4);
}

/* Imagen cuadrada */
.card-img{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:#0f0f0f;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.card-title{
  padding:10px 12px 0;
}

.card-price{
  padding:0 12px 12px;
  color:#fff;
  opacity:.95;
}

/* ================== HERO ================== */
.hero-wrap{
  position:relative;
}

.hero-video{
  width:100%;
  max-height:72vh;
  object-fit:cover;
  border:0;
  display:block;
  background:#000;
  filter:brightness(.6);
}

.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
}

.hero-overlay .inner{
  padding:24px 16px;
  background:linear-gradient(
    transparent,
    rgba(0,0,0,.35) 35%,
    rgba(0,0,0,.6)
  );
  border-radius:16px;
}

.hero-title{
  font-size:clamp(28px,4vw,48px);
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}

.hero-sub{
  margin-top:6px;
  opacity:.92;
  color:#e5e5e5;
}

/* ================== DRAWER ================== */
#drawer{z-index:9998}
#panel{top:calc(56px + env(safe-area-inset-top,0px))}

/* ================== PRODUCT PAGE ================== */
.product-gallery{
  max-width:100%;
  overflow:hidden;
  border-radius:12px;
}

.product-gallery img{
  width:100%;
  height:auto;
  display:block;
}

/* ================== MOBILE ================== */
@supports(padding: max(0px)){
  .topbar{
    padding-top:env(safe-area-inset-top);
  }
}

#hamb,#cartBtn{
  min-width:40px;
  min-height:40px;
}

@media (max-width: 480px){
  .container{padding:0 12px}

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .card-title{font-size:13.5px}
  .card-price{font-size:13px}

  .hero-video{max-height:70vh}
  .hero-overlay .inner{padding:16px 12px}
  .hero-title{font-size:clamp(22px,6vw,36px)}
  .hero-sub{font-size:clamp(12px,3.6vw,14px)}
}

@media (min-width: 481px) and (max-width: 768px){
  .grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
/* ====== Precio con descuento (catálogo + producto) ====== */
.card-price{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}

.price-old{
  opacity:.65;
  text-decoration:line-through;
}

.price-new{
  font-weight:800;
}

.badge-off{
  font-size:12px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#111;
}