/* ==========================================================================
   MINI BIKE KLUB — Cart & Checkout Styles
   ========================================================================== */

/* Cart */
.cart-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:70px;
  padding:50px 0 100px;
  align-items:start;
}
.cart-list{ border-top:1px solid var(--border); }
.cart-item{
  display:grid;
  grid-template-columns:90px 1fr auto auto auto;
  gap:20px;
  align-items:center;
  padding:24px 0;
  border-bottom:1px solid var(--border);
}
.cart-item-image{ width:90px; height:90px; background:var(--border); overflow:hidden; }
.cart-item-image img{ width:100%; height:100%; object-fit:cover; }
.cart-item-name{ font-size:15px; }
.cart-item-cat{ font-size:12px; color:var(--text-secondary); margin-top:4px; }
.cart-item-price{ font-size:14px; }
.cart-item-total{ font-size:14px; min-width:70px; text-align:right; }
.cart-item-remove{
  background:none; border:none; color:var(--text-secondary);
  font-size:12px; letter-spacing:0.5px; text-decoration:underline;
}
.cart-item-remove:hover{ color:var(--text); }

.cart-empty{
  padding:80px 0;
  text-align:center;
  display:none;
  flex-direction:column;
  gap:20px;
  align-items:center;
}
.cart-empty.show{ display:flex; }
.cart-list.hidden, .cart-summary.hidden{ display:none; }

.cart-summary{
  border:1px solid var(--border);
  padding:30px;
  position:sticky;
  top:110px;
}
.cart-summary h3{ margin-bottom:20px; }
.summary-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  color:var(--text-secondary);
}
.summary-row.total{
  color:var(--text);
  font-size:16px;
  border-bottom:none;
  padding-top:18px;
}
.free-shipping-note{
  margin-top:18px;
  padding:14px;
  border:1px solid var(--border);
  font-size:12px;
  color:var(--text-secondary);
}
.cart-summary .btn{ margin-top:22px; }

@media (max-width:900px){
  .cart-layout{ grid-template-columns:1fr; gap:40px; }
  .cart-summary{ position:static; }
  .cart-item{ grid-template-columns:60px 1fr; row-gap:10px; }
  .cart-item-price, .cart-item-total{ grid-column:2; text-align:left; }
  .cart-item-remove{ grid-column:2; justify-self:start; }
}

/* Checkout */
.checkout-layout{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:70px;
  padding:50px 0 100px;
  align-items:start;
}
.form-section h2{ margin-bottom:26px; }
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.form-grid .full{ grid-column:1 / -1; }
.field label{
  display:block;
  font-size:12px;
  letter-spacing:0.5px;
  color:var(--text-secondary);
  margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  padding:13px 14px;
  font-size:14px;
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--text); outline:none; }
.field-error{ font-size:11px; color:#B33A3A; margin-top:6px; min-height:14px; }

.payment-methods{ margin-top:36px; }
.payment-methods h2{ margin-bottom:18px; }
.payment-options{ display:flex; flex-direction:column; gap:10px; }
.payment-option{
  border:1px solid var(--border);
  padding:16px 18px;
}
.payment-option-head{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.payment-option input{ accent-color:var(--text); }
.payment-instructions{
  display:none;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--text-secondary);
}
.payment-option.selected .payment-instructions{ display:block; }

.agreement{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:30px;
  font-size:13px;
  color:var(--text-secondary);
}
.agreement input{ margin-top:3px; accent-color:var(--text); }

.order-summary{
  border:1px solid var(--border);
  padding:30px;
  position:sticky;
  top:110px;
}
.order-summary h2{ margin-bottom:20px; }
.order-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  color:var(--text-secondary);
}
.order-line .name{ color:var(--text); }

@media (max-width:900px){
  .checkout-layout{ grid-template-columns:1fr; gap:40px; }
  .order-summary{ position:static; }
  .form-grid{ grid-template-columns:1fr; }
}

/* Order confirmation */
.confirmation{
  padding:130px 0;
  text-align:center;
}
.confirmation .inner{ max-width:480px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:18px; }
.confirmation .order-num{ font-size:14px; letter-spacing:1px; padding:10px 20px; border:1px solid var(--border); margin:6px 0; }