/* ============================================================
   BelowBookStocks.com — checkout styles
   ============================================================ */

body{background:#eef2f5;font-size:17px;line-height:1.55;}

.grid{
  max-width:960px;margin:0 auto;padding:34px 22px 70px;
  display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start;
}
h1{font-size:26px;color:var(--blue);margin:0 0 6px;}

.steplabel{
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:#8a97a0;font-weight:bold;margin:26px 0 10px;
}
.card{background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px 22px 6px;}

label.f{display:block;font-size:13px;color:var(--soft);margin:0 0 5px;font-weight:bold;letter-spacing:.3px;}
input.t{
  width:100%;font-family:var(--serif);font-size:16px;padding:11px 12px;
  border:1px solid #cfd8dd;border-radius:4px;margin-bottom:16px;background:#fff;
}
input.t:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(11,61,92,.12);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cardline{position:relative;}
.brands{position:absolute;right:12px;top:34px;font-size:12px;color:#9aa7b0;letter-spacing:1px;}

/* summary */
.summary{background:#fff;border:1px solid var(--line);border-radius:5px;padding:24px 22px;position:sticky;top:22px;}
.summary h2{font-size:16px;text-transform:uppercase;letter-spacing:1.5px;color:#8a97a0;margin:0 0 16px;}
.li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);gap:10px;}
.li .name{color:#222;}
.li .name small{display:block;color:#8a97a0;font-size:12px;}
.li .amt{white-space:nowrap;}
.amt s{color:#9aa7b0;font-weight:400;margin-right:7px;}
.total{display:flex;justify-content:space-between;padding:16px 0 4px;font-size:22px;font-weight:bold;color:var(--ink);}
.total .amt{color:var(--red);}
.total .amt s{font-size:16px;}

/* order bump: title → 16:9 image → description */
.bump{
  display:block;
  margin-top:22px;padding:16px 18px;cursor:pointer;
  background:#fffbe9;border:2px dashed var(--gold);border-radius:6px;
}
.bump-head{display:flex;gap:10px;align-items:flex-start;}
.bump input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--red);}
.bump b{display:block;color:#8a6d00;font-size:16px;}
.bump-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid var(--line);margin:12px 0;}
.bump span{display:block;font-size:14px;color:var(--soft);line-height:1.5;}

/* validation */
input.t.invalid{border-color:var(--red);box-shadow:0 0 0 2px rgba(176,0,0,.12);}
.fielderr{display:block;color:var(--red);font-size:12px;font-weight:bold;margin:-12px 0 12px;}
.payerror{
  display:none;margin:4px 0 2px;padding:12px 14px;
  background:#fdeaea;border:1px solid #e7b3b3;border-radius:5px;
  color:var(--red);font-size:14px;font-weight:bold;line-height:1.45;
}
.payerror.show{display:block;}
.pay[disabled]{opacity:.7;cursor:default;}

.guar{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;font-size:13px;color:var(--soft);}
.guar b{color:var(--green);}
.badges{text-align:center;margin-top:16px;font-size:12px;color:#9aa7b0;letter-spacing:1px;}

@media (max-width:820px){
  .grid{grid-template-columns:1fr;}
  /* stack in natural reading order: contact → payment → bump → summary + pay button */
  .summary{position:static;}
}
@media (max-width:560px){
  .grid{padding:24px 18px 60px;gap:22px;}
  h1{font-size:23px;}
  .card{padding:18px 16px 4px;}
  .summary{padding:20px 18px;}
}
@media (max-width:400px){
  .row2{grid-template-columns:1fr;gap:0;}
}