:root{
  --ink: #111;
  --accent: #FF7373;
  --radius: 18px;
}

.cart-layout{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  margin: 22px 0 28px;
}
@media (max-width: 900px){
  .cart-layout{ grid-template-columns: 1fr; }
}

.section-title{
  margin: 0 12 12px;
  font-family: "Almendra Display", serif;
  font-size: 28px;
}

.cart-empty{
  padding: 14px;
  border: 2px dashed #ccc;
  border-radius: var(--radius);
  color: #555;
}

/* Cart table */
.cart-list{
  display: grid;
  gap: 10px;
}
.cart-row{
  display: grid;
  grid-template-columns: 1fr 120px 160px 120px 48px;
  gap: 10px;
  align-items: center;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  padding: 10px 12px;
}
.c-name{ font-weight: 700; }
.c-price, .c-line{ font-weight: 800; }
/* Right align numerical columns */
.c-price,
.c-line{ 
  text-align: right; 
}

/* Place the global total under the rows, aligned to the right */
.cart-total-row{
  margin: 16px 0 12px;
  text-align: right;    /* <-- pushes it to the right edge */
  font-weight: 800;
  font-size: 20px;
}
.cart-total-row strong{ font-size: 22px; }

/* qty controls */
.c-qty{ display:flex; align-items:center; gap:6px; }
.qty-btn{
  width:30px; height:30px; border-radius:999px;
  border:2px solid var(--ink); background:#fff; cursor:pointer;
}
.qty-input{
  width:56px; text-align:center; height:32px;
  border:2px solid var(--ink); border-radius:8px;
}
.remove-btn{
  width:30px; height:30px; border-radius:999px;
  border:2px solid var(--ink); background:#fff; cursor:pointer;
}

/* footer line */
.cart-footer{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 12px;
}
.cart-total{ font-weight: 800; font-size: 20px; }

/* form */
.form .grid{
  display:grid; gap:12px;
  grid-template-columns: 1fr 1fr;
}
.form label{ display:flex; flex-direction:column; gap:6px; font-weight:600; }
.form input, .form textarea{
  font: inherit; padding:10px 12px; border:2px solid var(--ink);
  border-radius: 10px; background:#fff;
}
@media (max-width: 900px){
  .form .grid{ grid-template-columns: 1fr; }
}
.form-actions{
  margin-top: 12px; display:flex; gap:10px; justify-content:flex-end;
}

/* buttons */
.btn-outline{
  border: 2px solid var(--ink);
  background:#fff; color:var(--ink);
  padding:10px 14px; border-radius: 999px; font-weight:700; cursor:pointer;
}
.btn-primary{
  border: 2px solid var(--ink);
  background: var(--accent); color:#fff;
  padding:10px 16px; border-radius: 999px; font-weight:800; cursor:pointer;
}
.btn-outline:hover, .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.cart-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

/* make anchors styled as buttons too */
.btn-primary,
.btn-outline{
  text-decoration: none; /* remove underline on the <a> */
  display: inline-flex;
  align-items: center;
}

/* Center the content on the page */
.container{
  max-width: 1200px;      /* pick 1200–1300 to match your other pages */
  margin: 0 auto;         /* <-- centers */
  padding: 0 16px;        /* nice gutter on small screens */
}
