:root{
  --bg:#0f1720;
  --panel:#1c2630;
  --panel-2:#222e3a;
  --text:#eaeef3;
  --muted:#9B9B9B;
  --brand:#6A4A25;        /* marrón corporativo */
  --accent:#E66808;       /* naranja botones */
  --card:#101820;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Rubik,system-ui,Segoe UI,Arial,sans-serif;
}

/* Topbar */
.topbar{position:sticky;top:0;z-index:5;background:linear-gradient(0deg,#0f1720,#151f28);
  border-bottom:1px solid #253241}
.brand{display:flex;gap:14px;align-items:center; padding:14px 18px;}
.logo{width:44px;height:44px}
.titles h1{font-size:18px; margin:0 0 4px 0}
.titles p{margin:0; color:var(--muted); font-size:13px}

/* Grid */
.container{max-width:1100px;margin:28px auto 120px; padding:0 16px}
.grid{display:grid;gap:18px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* Card */
.card{background:var(--panel); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.card .img-wrap{background:#0b1117; display:block; aspect-ratio:4/3; overflow:hidden}
.card img{width:100%; height:100%; object-fit:cover; display:block}

.card .content{padding:14px}
.title{font-weight:700; margin:6px 0 4px}
.badge{display:inline-block; padding:2px 8px; border-radius:999px;
  background:#2a3746; color:#c9d2dc; font-size:11px}

/* Price row with qty */
.price-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.price{font-weight:700}
.s-incl{color:var(--muted); font-size:12px}

/* qty control */
.qty{display:flex; align-items:center; gap:8px}
.qty button{width:32px;height:32px;border-radius:10px; border:1px solid #334357;
  background:var(--panel-2); color:var(--text); font-weight:700; cursor:pointer}
.qty input{width:44px; text-align:center; padding:6px 4px; border-radius:10px;
  border:1px solid #334357; background:#0f1720; color:var(--text); font-weight:600}

/* Accordion */
.accordion{margin-top:12px}
.ac-head{background:#16212b; padding:12px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; border-radius:12px}
.ac-head h4{margin:0; font-size:14px}
.ac-body{display:none; padding:12px; background:#121b24; border-radius:0 0 12px 12px; line-height:1.55}
.ac-body p{margin:6px 0}
.ac-body a{color:#f1b07d; text-decoration:none}
.ac-body a:hover{text-decoration:underline}

/* Links list inline */
.link-list{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.link-list a{color:#f1b07d; font-weight:600}

/* Sticky cart */
.cartbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  align-items:center; gap:14px; background:#0d141b; padding:12px 16px; border-top:1px solid #263240}
.btn-primary{background:var(--accent); color:#fff; border:0; padding:10px 14px; border-radius:12px;
  font-weight:700; cursor:pointer; box-shadow:0 2px 8px rgba(230,104,8,.35)}
.btn-primary:disabled{opacity:.5; cursor:not-allowed}

/* Helpers */
.muted{color:var(--muted)}

.min-note{
  margin-left:10px;
  color:var(--muted);
  font-size:12px;
}