/* ═══════════════════════════════════════════════════════════════════════
   HLX — checkout-only styles. Loaded after site.css, which supplies
   the tokens, buttons, header and .sums block this file builds on.
   ═══════════════════════════════════════════════════════════════════════ */

.co-page{background:var(--paper-2); display:flex; flex-direction:column; min-height:100vh}
.co-page main{flex:1 0 auto}
.co-page #hdr{background:rgba(242,239,232,.94)}
.secure-tag{margin-left:auto; display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-2)}
.secure-tag svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.co-head{padding:clamp(2rem,5vw,3.4rem) 0 .3rem}
.crumb{font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-3); margin-bottom:1rem}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.5; margin:0 .3rem}
.co-head h1{font-family:var(--serif); font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.03em}
.co-head h1 em{color:var(--txt-2)}

.co-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.5rem,3vw,2.6rem);
  align-items:start; padding:2rem 0 clamp(3rem,7vw,5.5rem)}
.co-summary{position:sticky; top:86px; display:grid; gap:1rem}

.co-card{background:var(--paper); border:1px solid var(--line)}
.co-card-h{display:flex; align-items:baseline; justify-content:space-between;
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--line)}
.co-card-h h2{font-family:var(--serif); font-size:1.35rem; letter-spacing:-.02em}
.co-edit-bag{font-family:var(--mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--txt-3); border-bottom:1px solid var(--line)}
.co-edit-bag:hover{color:var(--ink); border-color:var(--ink)}

.co-lines{list-style:none; margin:0; padding:0 1.4rem}
.co-line{display:grid; grid-template-columns:52px 1fr auto; gap:.9rem; align-items:center;
  padding:1rem 0; border-bottom:1px solid var(--line)}
.co-line:last-child{border-bottom:0}
.co-line img{width:52px; height:65px; object-fit:cover; border:1px solid var(--line)}
.co-l-name{font-family:var(--serif); font-size:1rem; letter-spacing:-.015em; line-height:1.2}
.co-l-meta{font-family:var(--mono); font-size:.5625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-3); margin-top:.28rem}
.co-l-price{font-family:var(--mono); font-size:.8125rem; white-space:nowrap; text-align:right}

.co-bonus{display:flex; gap:.6rem; align-items:flex-start; margin:0 1.4rem;
  padding:.75rem .85rem; background:var(--ink); color:var(--paper);
  font-size:.8125rem; line-height:1.45}
.co-bonus svg{width:14px;height:14px;stroke:var(--acid);stroke-width:2.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:.22rem}
.co-bonus b{color:var(--acid); font-weight:600}

.co-totals{padding:1.2rem 1.4rem 1.4rem; border-top:1px solid var(--line);
  background:var(--paper-2); margin-top:1rem}
.co-promo{display:grid; grid-template-columns:1fr auto; gap:.5rem}
.co-promo input{padding:.62rem .75rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); font-family:var(--mono); font-size:.8125rem; letter-spacing:.05em;
  text-transform:uppercase; outline:none; min-width:0}
.co-promo input:focus{border-color:var(--ink)}
.co-promo input:disabled{opacity:.55; cursor:not-allowed}

/* ── Form column ──────────────────────────────────────────────────── */
.co-form{background:var(--paper); border:1px solid var(--line); padding:clamp(1.4rem,3vw,2.2rem)}
.co-step{display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.5rem}
.co-step-n{flex:0 0 auto; width:27px; height:27px; display:grid; place-items:center;
  border-radius:50%; background:var(--ink); color:var(--acid);
  font-family:var(--mono); font-size:.75rem}
.co-step h2{font-family:var(--serif); font-size:1.55rem; letter-spacing:-.022em}
.co-step-sub{font-size:.8125rem; color:var(--txt-2); margin-top:.3rem; line-height:1.5}

.co-form .f{margin-bottom:.9rem}
.co-form .f label{display:block; font-family:var(--mono); font-size:.625rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--txt-2); margin-bottom:.4rem}
.co-form .f label i{color:var(--warn); font-style:normal}
.co-form .f input{width:100%; padding:.78rem .85rem; border:1px solid var(--line);
  border-radius:var(--r); background:var(--paper-2); color:var(--txt); font-size:.9375rem;
  outline:none; transition:border-color .18s, background .18s, box-shadow .18s}
.co-form .f input:focus{border-color:var(--ink); background:var(--paper);
  box-shadow:0 0 0 3px rgba(216,255,62,.35)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:.85rem}

.co-why{display:flex; gap:.55rem; align-items:flex-start; font-size:.78125rem;
  color:var(--txt-2); line-height:1.5; margin:.3rem 0 1rem;
  padding:.7rem .8rem; background:var(--paper-2); border-left:2px solid var(--line)}
.co-why svg{width:14px;height:14px;stroke:var(--txt-3);stroke-width:2;fill:none;
  stroke-linecap:round;flex:0 0 auto;margin-top:.18rem}

/* ── Order bump ───────────────────────────────────────────────────── */
.bump{display:grid; grid-template-columns:auto 1fr 58px; gap:.8rem; align-items:start;
  margin:1.3rem 0 1.4rem; padding:.95rem 1rem; cursor:pointer; user-select:none;
  border:1.5px dashed var(--acid-dk); background:rgba(216,255,62,.11);
  transition:background .2s, border-color .2s}
.bump:hover{background:rgba(216,255,62,.2)}
.bump input{position:absolute; opacity:0; width:0; height:0}
.bump-box{width:19px; height:19px; border:1.5px solid var(--ink); background:var(--paper);
  display:grid; place-items:center; flex:0 0 auto; border-radius:2px; margin-top:.12rem}
.bump-box::after{content:""; width:9px; height:5px; border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink); transform:rotate(-45deg) scale(.4); opacity:0;
  transition:.18s var(--ease); margin-top:-2px}
.bump input:checked + .bump-box{background:var(--acid)}
.bump input:checked + .bump-box::after{opacity:1; transform:rotate(-45deg) scale(1)}
.bump input:focus-visible + .bump-box{outline:2px solid var(--acid-dk); outline-offset:2px}
.bump-h{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem}
.bump-h b{font-size:.9375rem; font-weight:600}
.bump-h em{font-family:var(--mono); font-style:normal; font-size:.875rem; white-space:nowrap}
.bump-d{display:block; font-size:.78125rem; color:var(--txt-2); margin-top:.3rem;
  line-height:1.45}
.bump-img{width:58px; height:72px; object-fit:cover; border:1px solid var(--line)}

/* ── Recap / edit ─────────────────────────────────────────────────── */
.recap{display:flex; align-items:flex-start; justify-content:space-between; gap:.9rem;
  background:var(--paper-2); border:1px solid var(--line); padding:.85rem 1rem;
  margin-bottom:1.3rem}
.recap-body{font-size:.8125rem; color:var(--txt-2); line-height:1.5}
.recap-body strong{display:block; color:var(--txt); font-family:var(--serif);
  font-size:1rem; font-weight:400; letter-spacing:-.015em; margin-bottom:.15rem}
.edit-link{flex:0 0 auto; font-family:var(--mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; border-bottom:1px solid var(--line); white-space:nowrap}
.edit-link:hover{border-color:var(--ink)}

/* ── Wallet + card ────────────────────────────────────────────────── */
.co-wallet{margin-bottom:1rem}
/* Drawn by the OS via -apple-pay-button, so there is no third-party button
   SDK to load and nothing else is named to the customer. */
.co-wallet-btn{display:block; width:100%; height:50px; border:0; padding:0; cursor:pointer;
  border-radius:var(--r); overflow:hidden;
  -webkit-appearance:-apple-pay-button; appearance:-apple-pay-button;
  -apple-pay-button-type:buy; -apple-pay-button-style:black}
.co-wallet-btn:disabled{opacity:.5; cursor:default}
.co-or{display:flex; align-items:center; gap:.8rem; margin:0 0 1.1rem;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3)}
.co-or::before,.co-or::after{content:""; flex:1; height:1px; background:var(--line)}

.card-block{margin-bottom:1rem}
.co-label{display:block; font-family:var(--mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--txt-2); margin-bottom:.4rem}
.co-label i{color:var(--warn); font-style:normal}
#bt-card-element{width:100%; padding:.82rem .85rem; min-height:50px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .18s, background .18s, box-shadow .18s}
#bt-card-element.co-focused{border-color:var(--ink); background:var(--paper);
  box-shadow:0 0 0 3px rgba(216,255,62,.35)}
.co-loading{color:var(--txt-3); font-size:.9375rem}

.co-descriptor{font-size:.78125rem; color:var(--txt-2); margin:.6rem 0 0;
  padding:.6rem .75rem; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r)}
.co-secure{display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--txt-3);
  margin:.7rem 0 1.2rem; line-height:1.45}
.co-secure svg{width:14px;height:14px;stroke:var(--ok);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ── Status / error / 3DS ─────────────────────────────────────────── */
.co-error{display:none; background:#FBEDE9; border:1px solid #E5BFB4; color:#8E3521;
  padding:.8rem .9rem; border-radius:var(--r); font-size:.84375rem; margin-bottom:1rem;
  line-height:1.5}
.co-error.show{display:block}
.co-status{display:none; background:var(--paper-2); border:1px solid var(--line);
  color:var(--txt-2); padding:.8rem .9rem; border-radius:var(--r); font-size:.84375rem;
  margin-bottom:1rem}
.co-status.show{display:block}
.co-3ds{margin-bottom:1rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); padding:.6rem}
.co-3ds iframe{width:100%; height:400px; border:0; border-radius:var(--r); background:var(--paper)}
.co-3ds-actions{display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-top:.6rem; font-size:.78125rem; color:var(--txt-3); flex-wrap:wrap}
.co-3ds-done{border:1px solid var(--ink); border-radius:var(--r); padding:.5rem .9rem;
  font-size:.78125rem; font-weight:600}
.co-3ds-done:hover{background:var(--ink); color:var(--paper)}

.co-terms{font-size:.75rem; color:var(--txt-3); text-align:center; margin-top:1rem;
  line-height:1.5}
.co-terms a{border-bottom:1px solid var(--line)}
.co-terms a:hover{color:var(--ink); border-color:var(--ink)}

/* ── Trust list ───────────────────────────────────────────────────── */
.co-trust{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.co-trust li{display:flex; gap:.6rem; font-size:.8125rem; color:var(--txt-2); line-height:1.5}
.co-trust b{color:var(--txt); font-weight:600}
.co-trust svg{width:14px;height:14px;stroke:var(--ok);stroke-width:2.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:.24rem}

.co-empty{text-align:center; padding:5rem 1rem 6rem}
.co-empty p{font-family:var(--serif); font-size:1.8rem; margin-bottom:1.4rem}

.co-foot{flex:0 0 auto; background:var(--ink); color:var(--on-ink-3); padding:1.4rem 0}
.co-foot .foot-b{border:0; padding:0}
.co-foot a{color:var(--on-ink-2)}
.co-foot a:hover{color:var(--acid)}

@media(max-width:940px){
  .co-grid{grid-template-columns:1fr}
  .co-summary{position:static; order:2}
  .co-form{order:1}
}
@media(max-width:520px){
  .f2{grid-template-columns:1fr; gap:0}
  .bump{grid-template-columns:auto 1fr; }
  .bump-img{display:none}
}