/* ===== Color system (sampled from your button) ===== */
  :root{
    --navy-900:#041326;   /* dominant background */
    --navy-700:#0C2F4A;   /* hover/gradient mid */
    --navy-600:#234862;   /* accents, lines */
    --gold-400:#D1B06B;   /* text + borders */
    --cartink:#0b1320;        /* headings */
    --carttext:#1f2937;       /* body */
    --cartmuted:#6b7280;      /* secondary text */
    --cartbg:#f7f7f8;         /* page */
    --card:#ffffff;       /* surfaces */
    --cartline:#e5e7eb;       /* dividers */
    --cartsuccess:#16a34a;
    --cartdanger:#dc2626;
  }

  /* ===== Base ===== */
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background:var(--cartbg);
    color:var(--carttext);
    -webkit-font-smoothing:antialiased;
    padding: clamp(8px, 2vw, 20px);
  }
  .cartcontainer{
    max-width: 960px;
    margin: 0 auto;
  }

  /* ===== Header ===== */
  .cart-header{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; margin-bottom:16px;
  }
  .cart-title{
    margin:0;
    font-weight:700;
    color:var(--cartink);
    letter-spacing:.2px;
    font-size: clamp(22px, 3.2vw, 30px);
  }
  .splash{
    height:6px; border-radius:4px;
	background-color: var(--gold-400);
    box-shadow: 0 1px 0 rgba(0,0,0,.08) inset;
    margin-bottom: 18px;
	border: 2px solid var(--navy-900);
  }

  /* ===== Card ===== */
  .cartcard{
    background:var(--card);
    border:1px solid var(--cartline);
    border-radius:16px;
    box-shadow: 0 6px 18px rgba(4,19,38,.06);
    overflow:hidden;
  }
  .card-body{ padding: clamp(10px, 2vw, 18px); }
  
  /* ===== Table -> responsive ===== */
  .cart-table{
    width:100%;
    border-collapse: collapse;
  }
  .cart-table thead th{
    text-align:left; font-weight:600; color:var(--cartmuted);
    padding:12px 10px; border-bottom:1px solid var(--cartline);
  }
  .cart-table tbody td{
    padding:14px 10px; vertical-align:middle;
    border-bottom:1px solid var(--cartline);
  }
  .item{
    display:flex; gap:12px; align-items:center;
  }
  .item .name{ font-weight:600; color:var(--cartink); }
  .price, .qty, .line-total{ white-space:nowrap; font-variant-numeric: tabular-nums; }
  .qty input{
    width:72px; max-width:100%;
    padding:8px 10px; border-radius:10px; border:1px solid var(--cartline);
    background:#fff; font:inherit;
  }
  
  /* Let grid children shrink instead of forcing overflow */
	.layout > * { min-width: 0; }

	/* Belt-and-suspenders: clip any sub-pixel overflow inside cards */
	.cartcard, .summary { overflow-x: clip; }


  /* Stack rows as cards on small screens */
  @media (max-width:700px){
    .cart-table thead{ display:none; }
    .cart-table tbody tr{
      display:grid; grid-template-columns: 1fr auto; gap:8px 12px;
      padding:12px 0;
    }
    .cart-table tbody td{
      border:0; padding:6px 2px;
    }
    .cart-table tbody td[data-label]::before{
      content: attr(data-label);
      display:block; font-size:12px; color:var(--cartmuted); margin-bottom:2px;
    }
    .price, .qty, .line-total{ justify-self:end; }
    .remove-cell{ grid-column: 1 / -1; }
	.price, .line-total { white-space: normal; }
	.cartcard { width: 96%; margin: 0 auto; }
  }

  /* ===== Summary / Aside ===== */
  .layout{
    display:grid; gap:18px;
    grid-template-columns: 1.5fr 1fr;
  }
  @media (max-width:900px){ .layout{ grid-template-columns: 1fr; } }

  .summary{
    background:linear-gradient(180deg, #ffffff, #fbfbfd);
    border:1px solid var(--cartline);
    border-radius:14px; padding:16px;
  }
  .summary h3{ margin:0 0 12px; font-size:18px; color:var(--cartink); }
  .summary .row{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; border-bottom:1px dashed var(--cartline);
  }
  .summary .row:last-child{ border-bottom:0; }
  .summary .label{ color:var(--cartmuted); }
  .summary .value{ font-variant-numeric: tabular-nums; }

  .promo{
    margin-top:12px; display:flex; gap:8px;
  }
  .promo input[type="text"]{
    flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--cartline);
    background:#fff; font:inherit;
  }

  /* ===== Buttons ===== */
  .btn{
    appearance:none; border:0; cursor:pointer; font-weight:700;
    padding:12px 18px; border-radius:999px; font-size:15px;
    display:inline-flex; align-items:center; gap:10px; text-decoration:none; justify-content:center;
    transition: transform .05s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    user-select:none;
  }
  .btn:active{ transform: translateY(1px); }

  .btn-primary{
    color:var(--gold-400);
    background: linear-gradient(180deg, var(--navy-900), var(--navy-700));
    border:2px solid var(--gold-400);
    box-shadow: 0 6px 16px rgba(4,19,38,.35), 0 0 0 2px rgba(209,176,107,.08) inset;
  }
  .btn-primary:hover{ background: linear-gradient(180deg, var(--navy-900), var(--navy-600)); }

  .btn-ghost{
    color:var(--navy-700); background:transparent; border:1px solid var(--navy-600);
  }
  .btn-ghost:hover{ background:rgba(12,47,74,.06); }

  .actions{ display:flex; gap:10px; flex-wrap:wrap; }

  .note{ color:var(--cartmuted); font-size:13px; margin-top:8px; }

  /* small credit-card badges placeholder */
  .cc-logos{
    display:flex; gap:8px; align-items:center; flex-wrap:wrap; opacity:.75;
    font-size:12px; color:var(--cartmuted);
  }
  .cc-pill{
    padding:4px 8px; border:1px solid var(--cartline); border-radius:999px; background:#fff;
  }