:root{
  --bg:#000;
  --fg:#e5e5e5;
  --muted:#9ca3af;
  --card:#0a0a0a;
  --border:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
a{color:inherit}
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)}

/* Grilla general (desktop por defecto) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}

/* Tarjeta de producto */
.card{border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;background:var(--card)}
/* IMAGEN CUADRADA por defecto */
.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{font-weight:600;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)} /* blackout */
.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}
h1,h2{margin:8px 0}

/* Drawer (menú hamburguesa) debajo de la franja del logo */
#drawer{z-index:9998}
#panel{top:calc(56px + env(safe-area-inset-top,0px))}

/* ====== MOBILE POLISH ====== */
/* Safe areas para iPhone con notch */
@supports(padding: max(0px)){
  .topbar{padding-top:env(safe-area-inset-top)}
}

/* Hit areas más cómodas */
#hamb,#cartBtn{min-width:40px;min-height:40px}

/* Detalle de producto */
.product-gallery{max-width:100%;overflow:hidden;border-radius:12px}
.product-gallery img{width:100%;height:auto;display:block}

/* MÓVIL ≤480px: 2 columnas + tipografías más contenidas */
@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 más compacto */
  .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)}
}

/* Tablets 481–768px: 3 columnas */
@media (min-width: 481px) and (max-width: 768px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}