/* RITE CLOTHING — checkout
   layout: form on the left, order summary on the right (desktop);
   summary first, form below (phone). */

body.co-page{background:#E5E5E5}

.co{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  grid-template-rows:auto 1fr;
  grid-template-areas:"title summary" "main summary";
  column-gap:clamp(32px, 6vw, 96px);
  padding:44px var(--gutter) 40px;
  max-width:1120px;
}
.co-main{grid-area:main;max-width:480px}
.co-summary{grid-area:summary;align-self:start;position:sticky;top:calc(var(--hdr-h) + 24px)}

.co-title{grid-area:title;margin:0 0 28px;font-size:var(--fs);font-weight:500}
.co-label{
  margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);
}
.co-summary-head{display:flex;justify-content:space-between;align-items:baseline}
.co-edit{background:none;border:0;padding:0;cursor:pointer;font-size:var(--fs-s);text-decoration:underline;text-underline-offset:3px}
#co-lines{border-top:1px solid var(--line);margin-bottom:12px}
#co-lines .cl{border-bottom:1px solid var(--line)}

#checkout-form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-s);color:var(--muted)}
.field input{
  font-family:var(--font);font-size:16px;padding:10px 12px;
  border:1px solid var(--line);border-radius:0;background:var(--white);color:var(--ink);width:100%;
}
.field input:focus{outline:0;border-color:var(--ink)}
.co-note{margin:0;color:var(--muted)}
.error-text{margin:0;min-height:18px;color:#8A2F2F}
.submit-btn{
  width:100%;padding:10px 14px;border:0;background:var(--ink);color:var(--white);cursor:pointer;
  line-height:20px;
}
.submit-btn:disabled{opacity:.6;cursor:default}
.co-paynote{margin:0;color:var(--muted);font-size:var(--fs-s)}

.confirm{display:flex;flex-direction:column;gap:14px}
.confirm p{margin:0}
.confirm-status{font-weight:500}
.confirm-status.ok{color:var(--navy)}
.confirm-status.fail{color:#8A2F2F}
.confirm-ref{font-size:16px;font-weight:500}
.confirm-test{color:var(--muted);font-size:var(--fs-s)}
.confirm-msg{line-height:1.7}
.confirm-mail{color:var(--muted)}
.confirm-actions{display:flex;flex-direction:column;gap:10px}
.confirm-actions .btn-outline,
.confirm-actions .btn-outline:hover{width:100%;padding:9px 14px;background:none;color:var(--ink);cursor:pointer;line-height:20px}
.confirm-actions button:disabled{opacity:.6;cursor:default}
.link-btn{
  align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.confirm-recap{
  margin:0;white-space:pre-wrap;font-family:var(--font);font-size:13px;line-height:1.6;
  background:var(--paper);padding:14px;overflow-x:auto;
}
.pay-step .k{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.pay-step .v{margin-top:4px}
.btn-outline{
  display:block;text-align:center;padding:10px;border:1px solid var(--ink);text-decoration:none;
}
.btn-outline:hover{background:var(--ink);color:var(--white)}

.co-empty{padding:80px var(--gutter);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.co-empty p{margin:0}

@media (max-width:799px){
  .co{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    grid-template-areas:"title" "summary" "main";
    padding-top:24px;
  }
  .co-summary{position:static;margin-bottom:32px}
  .co-title{margin-bottom:20px}
}