/* Checkout: one page, short form on the left, order on the right (above the form on phones). */
.co-header { grid-template-columns: 1fr auto 1fr; }
.co-header .back { font-weight: 800; text-decoration: none; }
.co-header .secure { justify-self: end; font-weight: 700; font-size: .92rem; }
.co { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-top: clamp(28px, 5vw, 56px); padding-bottom: 80px; }
.co h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
.co fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.co legend { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; margin-bottom: 12px; padding: 0; }
.row { display: grid; gap: 0 14px; }
.row.two { grid-template-columns: 1fr 1fr; }
.row.three { grid-template-columns: .8fr 1fr 1fr; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 800; font-size: .92rem; margin-bottom: 6px; }
.field em { font-style: normal; font-weight: 600; opacity: .65; }
.field input, .field select { width: 100%; min-height: 54px; padding: 12px 16px; border: 2.5px solid var(--navy); border-radius: 16px; background: #fff; font-size: 1.02rem; appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus { outline: none; box-shadow: 0 0 0 4px var(--rr); }
.field.bad input, .field.bad select { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
.field .msg { display: block; color: #b3261e; font-weight: 700; font-size: .88rem; margin-top: 6px; }
.pin-note { min-height: 1.2em; margin: -6px 0 12px; font-weight: 700; font-size: .9rem; color: var(--teal); }
.co-error { background: #fff; border: 2.5px solid #b3261e; color: #b3261e; border-radius: 16px; padding: 14px 16px; font-weight: 700; margin-bottom: 14px; }
.pay { min-height: 62px; font-size: 1.2rem; }
.fine { font-size: .88rem; opacity: .8; margin-top: 14px; text-align: center; }

.co-summary { position: sticky; top: 92px; background: #fff; border: 2.5px solid var(--navy); border-radius: var(--radius); padding: 24px; box-shadow: 0 8px 0 var(--navy); }
.co-summary h2 { font-size: 2rem; }
.co-summary .line { grid-template-columns: 56px 1fr auto; }
.co-summary .line-img { width: 56px; height: 56px; }
.co-summary .line-img img { height: 48px; }
.empty-cart { font-weight: 700; }
.totals { margin: 16px 0 0; }
.totals > div { display: flex; justify-content: space-between; padding: 6px 0; font-weight: 700; }
.totals dt, .totals dd { margin: 0; }
.totals .grand { font-size: 1.35rem; font-weight: 800; border-top: 2px solid var(--line); margin-top: 6px; padding-top: 12px; }

@media (max-width: 860px) {
  .co { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
  .co-header .secure { display: none; }
}
@media (max-width: 520px) {
  .row.two, .row.three { grid-template-columns: 1fr 1fr; }
  .row.two .field { grid-column: 1 / -1; }
  .row.three .field:first-child { grid-column: 1; }
  .row.three .field:last-child { grid-column: 1 / -1; }
}