:root{
  --page-max:1200px;
}

/* wspolne dla "malych" stron: koszyk, checkout, potwierdzenie */
.page-wrap{ margin-top:80px; padding:26px 0 40px; }
.page-title{ margin:0 0 14px; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:16px;
}

.grid-2{
  display:flex;
  gap:24px;
  justify-content:space-between;
}
.grid-2 > *{ flex:1; }

@media (max-width: 1200px){
  .grid-2{ flex-direction:column; }
}

.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.table th{ background:var(--surface-2); font-size:13px; color:var(--muted); }

.form fieldset{ border:1px solid var(--border); padding:14px; margin:0 0 14px; }
.form legend{ font-weight:700; padding:0 8px; }
.form label{ display:block; margin:0 0 6px; color:var(--muted); font-size:14px; }
.form input,.form textarea{
  width:100%;
  height:44px;
  padding:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  margin:0 0 12px;
}
.form textarea{ height:96px; resize:none; }
.row{ display:flex; gap:12px; }
.row > *{ flex:1; }

.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:14px; }
.muted{ color:var(--muted); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  background:var(--brand);
  color:#fff;
  border:none;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
}
.btn:hover{ background:var(--brand-hover); text-decoration:none; }

.btn-outline{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.btn-outline:hover{ background:var(--surface-2); }

.btn-danger{ background:#111; color:#fff; }
.btn-danger:hover{ background:#000; }


/* Responsywne tabele: na mobile wiersze jako "karty" (bez przewijania poziomego) */
@media (max-width: 700px){
  .table{ min-width:0; }
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{ border:1px solid var(--border); border-radius:12px; margin:0 0 10px; overflow:hidden; }
  .table td{ border-bottom:1px solid var(--border); display:flex; gap:12px; justify-content:space-between; align-items:flex-start; }
  .table td:last-child{ border-bottom:none; }
  .table td::before{ content:attr(data-label); font-weight:700; color:var(--muted); flex:0 0 42%; }
  .table td > *{ text-align:right; }
  .table td .qty-box{ justify-content:flex-end; }
}

@media (max-width: 700px){
  .page-wrap{ margin-top:72px; padding:18px 0 28px; }
  .card{ padding:12px; }
  .table th,.table td{ padding:8px 10px; font-size:13px; }
  .row{ flex-direction:column; }
}