:root{
  --ink:#0f172a;
  --ink-soft:#475569;
  --line:#e2e8f0;
  --bg:#f8fafc;
  --surface:#ffffff;
  --brand:#d97706;
  --brand-dark:#b45309;
  --accent:#0f766e;
  --danger:#dc2626;
  --radius:12px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.15);
  --maxw:1180px;
  font-size:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f1f5f9; --ink-soft:#94a3b8; --line:#293548; --bg:#0b1120; --surface:#131c2e;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#f1f5f9; --ink-soft:#94a3b8; --line:#293548; --bg:#0b1120; --surface:#131c2e;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

.demo-banner{
  background:#fef3c7; color:#92400e; text-align:center; font-size:.8rem;
  font-weight:600; padding:6px 12px; letter-spacing:.02em;
}
:root[data-theme="dark"] .demo-banner{ background:#3f2d0a; color:#fbbf24; }

.site-header{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:24px;
}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; font-size:1.15rem; color:var(--ink)}
.logo-drop{font-size:1.4rem}
.logo-text strong{color:var(--brand)}
.main-nav{display:flex; gap:20px; flex:1}
.main-nav a{text-decoration:none; font-weight:500; color:var(--ink-soft); font-size:.92rem; padding:6px 0; border-bottom:2px solid transparent}
.main-nav a:hover, .main-nav a.active{color:var(--ink); border-color:var(--brand)}
.header-actions{display:flex; align-items:center}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:8px;
  font-size:1.2rem; padding:6px 10px; cursor:pointer; color:var(--ink);
}
.cart-btn{
  background:var(--brand); color:#fff; border:none; border-radius:999px;
  padding:9px 16px; font-weight:700; font-size:.9rem; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.cart-btn:hover{background:var(--brand-dark)}

.hero{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff; padding:56px 20px;
}
.hero-inner{max-width:var(--maxw); margin:0 auto}
.hero h1{font-size:2.1rem; margin:0 0 10px; font-weight:800; max-width:640px}
.hero p{color:#cbd5e1; max-width:560px; margin:0 0 22px; font-size:1.02rem}
.btn-primary{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  padding:12px 22px; border-radius:999px; font-weight:700; border:none; cursor:pointer; font-size:.95rem;
}
.btn-primary:hover{background:var(--brand-dark)}
.btn-full{width:100%; margin-top:6px}

.toolbar{
  display:flex; flex-wrap:wrap; gap:10px; padding:28px 0 12px;
}
.toolbar input, .toolbar select{
  padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:.9rem;
}
#searchInput{flex:1 1 260px}
.toolbar select{flex:0 0 auto}

.results-info{color:var(--ink-soft); font-size:.85rem; padding:6px 0 18px}

.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:18px; padding-bottom:48px;
}
.product-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow);
  cursor:pointer; transition:transform .15s ease;
}
.product-card:hover{transform:translateY(-2px)}
.card-img{
  height:120px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border-radius:8px; overflow:hidden; margin:-4px -4px 4px;
}
.card-img img{max-height:100%; max-width:100%; object-fit:contain}
.card-brand{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent)}
.card-name{font-size:.95rem; font-weight:600; line-height:1.3; min-height:2.4em}
.card-meta{font-size:.78rem; color:var(--ink-soft)}
.card-price{font-size:1.25rem; font-weight:800; margin-top:auto}
.card-price small{font-size:.7rem; font-weight:500; color:var(--ink-soft); display:block}
.card-add{
  margin-top:6px; background:var(--ink); color:var(--surface); border:none;
  border-radius:8px; padding:9px; font-weight:600; cursor:pointer; font-size:.85rem;
}
.card-add:hover{opacity:.85}

.empty-state{text-align:center; color:var(--ink-soft); padding:60px 20px}

.site-footer{border-top:1px solid var(--line); padding:26px 0; color:var(--ink-soft); font-size:.82rem}

/* Cart drawer */
.cart-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:30;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  display:flex; align-items:center; justify-content:center;
}
.cart-overlay.open, .modal-overlay.open{opacity:1; pointer-events:auto}
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:92vw;
  background:var(--surface); z-index:31; transform:translateX(100%);
  transition:transform .25s ease; display:flex; flex-direction:column;
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
}
.cart-drawer.open{transform:translateX(0)}
.cart-header{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line)}
.cart-header button{background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--ink-soft)}
.cart-items{flex:1; overflow-y:auto; padding:10px 20px}
.cart-item{display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--line)}
.cart-item-info{flex:1}
.cart-item-name{font-size:.85rem; font-weight:600}
.cart-item-meta{font-size:.75rem; color:var(--ink-soft)}
.cart-item-qty{display:flex; align-items:center; gap:8px; margin-top:6px}
.cart-item-qty button{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; font-size:.8rem; line-height:1;
}
.cart-item-remove{background:none; border:none; color:var(--danger); font-size:.75rem; cursor:pointer; padding:0}
.cart-item-price{font-weight:700; font-size:.88rem; white-space:nowrap}
.cart-empty{text-align:center; color:var(--ink-soft); padding:40px 0; font-size:.9rem}
.cart-footer{padding:16px 20px; border-top:1px solid var(--line)}
.cart-total-row{display:flex; justify-content:space-between; font-size:1rem; margin-bottom:12px}
.btn-checkout{
  width:100%; background:var(--brand); color:#fff; border:none; border-radius:8px;
  padding:12px; font-weight:700; cursor:pointer; font-size:.95rem;
}
.btn-checkout:disabled{opacity:.5; cursor:not-allowed}
.cart-note{font-size:.7rem; color:var(--ink-soft); text-align:center; margin:10px 0 0}

/* Product modal */
.modal{
  background:var(--surface); max-width:520px; width:92vw; border-radius:16px;
  padding:26px; position:relative; box-shadow:var(--shadow);
}
.modal-close{
  position:absolute; top:14px; right:14px; background:none; border:none;
  font-size:1.1rem; cursor:pointer; color:var(--ink-soft);
}
.modal-brand{font-size:.75rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em}
.modal h3{margin:6px 0 4px; font-size:1.25rem}
.modal-code{color:var(--ink-soft); font-size:.8rem; margin-bottom:14px}
.modal-price{font-size:1.7rem; font-weight:800; margin:10px 0}
.modal-spec{background:var(--bg); border-radius:8px; padding:12px; font-size:.85rem; color:var(--ink-soft); margin-bottom:12px}
.modal-orientacion{background:#ecfdf5; border:1px solid #a7f3d0; border-radius:8px; padding:12px; font-size:.85rem; color:#065f46; margin-bottom:16px}
:root[data-theme="dark"] .modal-orientacion{background:#052e26; border-color:#0f766e; color:#a7f3d0}

/* Checkout modal (mercado pago style) */
.checkout-modal{max-width:420px}
.mp-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.mp-logo{font-weight:800; color:#009ee3}
.mp-tag{font-size:.7rem; background:#fef3c7; color:#92400e; padding:3px 8px; border-radius:999px; font-weight:700}
#checkoutSummary{background:var(--bg); border-radius:8px; padding:12px; font-size:.85rem; margin-bottom:14px}
.shipping-toggle{display:flex; gap:8px; margin-bottom:8px}
.ship-opt{
  flex:1; padding:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  border-radius:8px; font-weight:600; font-size:.82rem; cursor:pointer;
}
.ship-opt.active{border-color:var(--brand); color:var(--brand); background:#fff7ed}
:root[data-theme="dark"] .ship-opt.active{background:#3f2d0a}
.shipping-cost{font-size:.78rem; color:var(--ink-soft); margin-bottom:14px}
.direccion-fields{display:flex; flex-direction:column; gap:10px; margin:2px 0}
.direccion-fields[hidden]{display:none}
#checkoutForm{display:flex; flex-direction:column; gap:10px}
#checkoutForm input{
  padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:.9rem;
}
.row2{display:flex; gap:10px}
.row2 input{flex:1}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--surface); padding:12px 20px; border-radius:999px;
  font-size:.85rem; font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease;
  z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (max-width:820px){
  .nav-toggle{display:inline-block; order:-1}
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:6px 20px 12px;
    box-shadow:var(--shadow);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 0; border-bottom:1px solid var(--line)}
  .main-nav a:last-child{border-bottom:none}
  .header-inner{position:relative; gap:12px}
  .logo{flex:1}
  .hero{padding:36px 20px}
  .hero h1{font-size:1.5rem}
  .hero p{font-size:.92rem}
}

@media (max-width:480px){
  .toolbar{flex-direction:column; align-items:stretch}
  .toolbar input, .toolbar select, #searchInput{flex:none; width:100%; height:auto}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .card-name{font-size:.85rem}
  .card-price{font-size:1.05rem}
  .cart-drawer{width:100%; max-width:100%}
  .checkout-modal{max-width:94vw}
  .row2{flex-direction:column}
  .modal{padding:20px}
}