/* ===== Top bar (same as customize.css) ===== */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:#0f1629; border-bottom:1px solid #1c2742;
  position:sticky; top:0; z-index:10;
}
.brand{ color:#e6eef8; font-weight:800; letter-spacing:.3px; text-decoration:none; font-size:18px }
.topnav a{ color:#cfe0ff; text-decoration:none; margin-left:14px }
.topnav .btn{ background:#2554ff; color:#fff; padding:8px 12px; border-radius:10px; font-weight:700 }
.cart-link{ position:relative; padding-right:14px }
.badge{
  position:absolute; top:-6px; right:0; background:#ef4444; color:#fff;
  border-radius:999px; padding:2px 6px; font-size:12px; font-weight:800;
}

/* ===== Theme tokens (match customize.css) ===== */
:root{
  --bg:#0b1220; --panel:#0f1629; --edge:#1c2742;
  --ink:#e6eef8; --muted:#90a4b7;
  --accent:#4f8cff; --accent-2:#7aa5ff;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:radial-gradient(1200px 600px at 70% -20%, #1a2a4a 0%, transparent 60%), var(--bg);
}

/* ===== Containers ===== */
.cart-wrap{ max-width:1100px; margin:24px auto; padding:0 20px }
h1,h2{ margin:0 0 14px }

/* Card panel style (used by row layout) */
.panel, .cart-card{
  background:linear-gradient(180deg, #0e1730 0%, #0d1426 100%);
  border:1px solid var(--edge);
  border-radius:16px;
  box-shadow:0 12px 50px rgba(10,16,35,.45), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ===== Buttons ===== */
.btn{
  padding:12px 16px; border-radius:12px;
  border:1px solid #4476e6;
  background:linear-gradient(180deg,#3f7cff,#2e63d8);
  color:#fff; font-weight:800; letter-spacing:.3px; cursor:pointer;
  text-decoration:none; display:inline-block;
  box-shadow:0 10px 30px rgba(79,140,255,.35);
}
.btn:hover{ filter:brightness(1.06) }
.btn.secondary{
  border-color:#2d3b66; background:#111a33; color:#cfe0ff; box-shadow:none;
}
.rm-btn{
  background:#111a33; border:1px solid var(--edge); color:#cfe0ff;
  border-radius:10px; padding:8px 10px; cursor:pointer;
}
.muted{ color:var(--muted) }

/* ===== Card/Row cart layout (if you use the non-table version) ===== */
.cart-card{ padding:16px }
.cart-row{
  display:grid; grid-template-columns:110px 1.4fr .8fr .8fr 36px;
  gap:14px; align-items:center; border-bottom:1px solid var(--edge); padding:12px 0;
}
.cart-row:last-child{ border-bottom:0 }
.thumb{
  width:110px; height:90px; object-fit:cover;
  border-radius:8px; border:1px solid var(--edge); background:#0b1320;
}
.kv{ font-size:13px; color:#cfe0ff }
.kv span{ display:inline-block; min-width:120px; color:var(--muted) }
.cart-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
.totals{ display:flex; justify-content:space-between; gap:20px; margin-top:18px; align-items:center }
.actions{ display:flex; gap:10px; align-items:center }

@media (max-width: 860px){
  .cart-row{ grid-template-columns:90px 1fr; align-items:flex-start }
}

/* ===== Table cart layout (if you use a <table class="cart-table">) ===== */
.table-panel{
  padding:12px 12px 4px;
}
.cart-table{
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden; border-radius:14px; border:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.cart-table thead th{
  text-align:left; font-weight:800; font-size:14px; color:#cfe0ff;
  padding:12px; background:#0f1730; border-bottom:1px solid var(--edge);
}
.cart-table tbody td{
  padding:12px; border-bottom:1px solid var(--edge); color:#d9e6ff;
}
.cart-table tbody tr:last-child td{ border-bottom:0 }
.cart-table img{
  width:72px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--edge);
  background:#0b1320; vertical-align:middle; margin-right:8px;
}

/* Footer actions for table layout */
.cart-actions{
  margin-top:14px; display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.cart-actions .right{ margin-left:auto; display:flex; gap:12px; align-items:center }
.subtotal{ font-weight:800 }

/* === Empty cart polished layout === */
.cart-title{
  max-width: 980px;
  margin: 28px auto 8px;
  padding: 0 16px;
  text-align: center;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  color: #e8eef7;
}

.cart-empty{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

.empty-card{
  margin: 8px auto 0;
  width: min(720px, 100%);
  background: #0f1a34;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 26px 20px 20px;
  text-align: center;
  color: #e8eef7;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.empty-icon{
  width: 60px; height: 60px; margin: 0 auto 10px;
  display: grid; place-items: center; font-size: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg,#132147,#0e1936);
  border: 1px solid rgba(255,255,255,.12);
}

.empty-card h2{ margin: 6px 0 4px; font-size: 22px; }
.empty-sub{ margin: 0 0 16px; opacity: .85; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 10px;
  border:1px solid rgba(255,255,255,.18);
  background: transparent; color:#e8eef7; text-decoration:none;
  font-weight:600; cursor:pointer; transition: .15s ease;
}
.btn:hover{ background: rgba(255,255,255,.06); }
.btn-primary{ background:#3b82f6; border-color:#2f6fe0; color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); }

.empty-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-bottom: 14px;
}

/* Quick links as chips (no blue underline) */
.quick-links{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.quick-links a{
  padding: 8px 12px;
  border-radius: 999px;
  background:#0c1630;
  border:1px solid rgba(255,255,255,.12);
  color:#cfe4ff;
  text-decoration:none;
  font-size:14px;
}
.quick-links a:hover{
  background:#0e1b39; border-color:rgba(255,255,255,.18);
}

/* Mobile */
@media (max-width: 560px){
  .empty-card{ padding: 22px 14px 16px; }
  .btn, .quick-links a{ width: 100%; }
}