/* North Steed checkout. Loads after ns.css (variables, fonts, .btn, .promo, .hdr). Mobile first, desktop split >= 1000px. */
body.co{background:#fff;font-size:15.5px;line-height:1.5}
.co .promo{font-size:11.5px;letter-spacing:.04em;padding:8px 10px}
.co .hdr{position:relative;background:#fff}
.co .hdr .wrap{height:64px}
.co .hdr img{height:48px}
.co .lock{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--steel);font-weight:600}
.co .lock svg{width:15px;height:15px}

/* mobile summary toggle (open by default) */
.mtog{background:var(--silver2);border-bottom:1px solid var(--line)}
.mtog button{width:100%;max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:15px 20px;cursor:pointer;font:500 15px var(--bd);color:var(--ink)}
.mtog .lbl{display:flex;align-items:center;gap:8px}
.mtog .lbl svg{width:18px;height:18px}
.mtog .chev{display:inline-block;transition:transform .2s;font-size:10px;color:var(--steel)}
.mtog[data-open="1"] .chev{transform:rotate(180deg)}
.mtog .amt{font-family:var(--hd);font-stretch:110%;font-size:18px;font-weight:800}
.mtog .amt s{font-family:var(--bd);font-size:13px;font-weight:400;color:var(--steel2);margin-right:6px}
.mpanel{display:none;background:var(--silver2);border-bottom:1px solid var(--line)}
.mpanel .in{max-width:560px;margin:0 auto;padding:4px 20px 20px}
.mtog[data-open="1"]+.mpanel{display:block}

/* layout */
.colay{max-width:1120px;margin:0 auto}
.comain{max-width:560px;margin:0 auto;padding:22px 20px 48px}
.coside{display:none}

.co h2.ch{font-family:var(--hd);font-stretch:112%;font-size:21px;font-weight:800;margin:0 0 14px}
.cs{margin:0 0 30px}
.xhead{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--steel);text-align:center;margin:0 0 12px;font-weight:600}
.ppbtn{width:100%;height:54px;border-radius:999px;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#FFC439;transition:filter .2s}
.ppbtn:hover{filter:brightness(.96)}
.ppbtn img{height:22px}
.orsep{display:flex;align-items:center;gap:14px;margin:26px 0 24px;color:var(--steel2);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em}
.orsep:before,.orsep:after{content:"";flex:1;height:1px;background:var(--line)}

/* fields (floating label) */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg .full{grid-column:1/-1}
.fg.three .city{grid-column:1/-1}
.ff{position:relative}
.ff input,.ff select{width:100%;height:54px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:16px;padding:21px 13px 6px;font-family:var(--bd);color:var(--ink);-webkit-appearance:none;appearance:none}
.ff select{padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B626C' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.ff input:focus,.ff select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ff label{position:absolute;left:14px;top:16px;font-size:15.5px;color:var(--steel);pointer-events:none;transition:all .12s;white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}
.ff input:focus+label,.ff input:not(:placeholder-shown)+label,.ff.sel label{top:7px;font-size:12px}
.ff .ico{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--steel2);display:flex}
.ff .ico svg{width:16px;height:16px}
.emsg{display:none;font-size:13px;color:var(--red2);margin-top:5px}
.ff.error input,.ff.error select{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.ff.error~.emsg{display:block}
.hint{font-size:12.5px;color:var(--steel);margin-top:5px}
.ckb{display:flex;gap:10px;align-items:center;font-size:14.5px;cursor:pointer}
.ckb input{width:18px;height:18px;accent-color:var(--ink);margin:0}

/* payment */
.paysub{color:var(--steel);font-size:14px;margin:-8px 0 14px}
.paybox{border:1px solid var(--ink);border-radius:12px;overflow:hidden}
.payhead{display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--silver2);border-bottom:1px solid var(--line)}
.payhead .l{display:flex;align-items:center;gap:10px;font-weight:600}
.radio{width:18px;height:18px;border-radius:50%;border:6px solid var(--ink);background:#fff}
.cards{display:flex;gap:4px}
.cards i{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;border:1px solid var(--line);background:#fff;border-radius:4px;padding:3px 5px;color:var(--ink3)}
.paybody{padding:14px;display:grid;gap:12px;background:#fff}
.cardrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cbrand{position:absolute;right:38px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;border-radius:4px;padding:2px 6px;color:#fff;background:var(--ink2);display:none}
.billing{display:none}
.billing.open{display:grid;gap:12px}

/* order summary */
.oline{display:flex;gap:14px;align-items:center}
.othumb{position:relative;flex:0 0 66px;height:66px;border:1px solid var(--line);border-radius:12px;background:var(--brushed);display:flex;align-items:center;justify-content:center}
.othumb img{max-width:86%;max-height:86%;object-fit:contain}
.othumb .qty{position:absolute;top:-9px;right:-9px;min-width:21px;height:21px;border-radius:11px;background:var(--steel);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 6px}
.oname{flex:1;font-size:14.5px;line-height:1.35}
.oname b{display:block;font-weight:600}
.oname span{color:var(--steel);font-size:13px}
.oname a{display:inline-block;font-size:13.5px;margin-top:3px;cursor:pointer;padding:4px 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.oprice{text-align:right;font-size:14.5px;line-height:1.3;font-weight:600}
.oprice s{display:block;color:var(--steel2);font-size:12.5px;font-weight:400}
.gift{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 12px;border-left:3px solid var(--ink);background:#fff;border-radius:0 8px 8px 0;font-size:14px;font-weight:600}
.gift svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.rows{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.row{display:flex;justify-content:space-between;font-size:14.5px;padding:4px 0}
.row.total{margin-top:6px;font-size:19px;font-weight:700;align-items:baseline}
.row.total>span:last-child{font-family:var(--hd);font-stretch:110%;font-weight:800;font-size:21px}
.row.total small{font-family:var(--bd);font-size:12px;font-weight:400;color:var(--steel);margin-right:6px}
.saved{font-size:13.5px;font-weight:600;margin-top:2px;color:var(--ink3)}
.msum{border-top:1px solid var(--line);padding-top:24px;margin:0 0 22px}

/* pay button + under-button block */
.co .btn.pay{border-radius:999px;font-size:19px}
.co .btn.pay svg{width:18px;height:18px}
.disc{font-size:11.5px;line-height:1.5;color:var(--steel);margin:12px 2px 0}
.disc a{color:var(--steel)}
.gbox{display:flex;gap:12px;align-items:flex-start;background:var(--silver2);border-radius:12px;padding:14px;margin:12px 0 0}
.gbox svg{flex:0 0 26px;width:26px;height:26px;color:var(--ink)}
.gbox b{display:block;font-family:var(--hd);font-stretch:110%;font-size:15.5px;margin-bottom:2px}
.gbox p{font-size:14px;color:var(--ink3);line-height:1.45}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 0;text-align:center}
.badges div{font-size:12px;font-weight:500;line-height:1.3;color:var(--steel)}
.badges svg{width:22px;height:22px;display:block;margin:0 auto 5px;color:var(--ink)}
.cquote{margin:18px 0 0;border-left:3px solid var(--ink);padding:4px 0 4px 14px;font-size:14.5px;line-height:1.45}
.cquote .st{letter-spacing:2px;font-size:13px}
.cquote .who{color:var(--steel);font-size:12.5px;margin-top:3px}
.pol{border-top:1px solid var(--line);margin-top:28px;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 18px}
.pol a{font-size:13px;color:var(--steel)}

/* desktop split */
@media (min-width:1000px){
  body.co{background:linear-gradient(90deg,#fff 50%,var(--silver2) 50%)}
  .co .hdr{background:#fff}
  .mtog,.mpanel,.msum{display:none!important}
  .colay{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 100px)}
  .comain{max-width:none;margin:0;padding:40px 44px 64px 20px;background:#fff;border-right:1px solid var(--line)}
  .coside{display:block;background:var(--silver2)}
  .coside .in{position:sticky;top:0;padding:40px 20px 60px 44px;max-width:480px}
  .fg.three{grid-template-columns:1fr 1fr 1fr}
  .fg.three .city{grid-column:auto}
}

/* bottom sheets (bump + change supply) */
.sheet-ov{position:fixed;inset:0;background:rgba(22,24,28,.62);z-index:200;display:none;align-items:flex-end;justify-content:center}
.sheet-ov.open{display:flex}
.sheet{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:94vh;display:flex;flex-direction:column;animation:up .28s ease;box-shadow:0 -10px 34px rgba(0,0,0,.28)}
@keyframes up{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:10px auto 0}
.bhead{position:relative;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;white-space:nowrap;font-weight:600;color:var(--steel);padding:10px 52px 4px}
.bx{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;color:var(--steel);font-size:26px;cursor:pointer}
.bbody{overflow-y:auto;padding:10px 20px 4px}
.bti{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.bti .pic{flex:0 0 72px;height:72px;border-radius:14px;background:var(--brushed);display:flex;align-items:center;justify-content:center}
.bti .pic img{max-width:84%;max-height:84%;object-fit:contain}
.bti .pic.dark{background:var(--ink);color:#fff}
.bti .pic.dark svg{width:34px;height:34px}
.bti h3{font-size:22px;font-weight:800;line-height:1.1}
.bti p{font-size:14.5px;color:var(--steel);margin-top:3px;line-height:1.4}
.bl{list-style:none;margin:0;padding:0}
.bl li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600;line-height:1.35}
.bl li:last-child{border-bottom:0}
.bl li i{flex:0 0 22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.bl li small{display:block;font-weight:400;color:var(--steel);font-size:13px}
.bfoot{padding:14px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center}
.bbig{font-family:var(--hd);font-stretch:115%;font-size:38px;font-weight:900;line-height:1}
.bbig small{font-family:var(--mono);font-size:13px;letter-spacing:.12em;font-weight:600;color:var(--steel);margin-left:4px}
.bsmall{font-size:13.5px;color:var(--steel);margin:6px 0 12px}
.bsmall b{color:var(--ink)}
.co .byes{font-size:17px;min-height:58px;padding:10px 18px;line-height:1.2;text-align:center}
.byes.added{background:var(--ink);box-shadow:none;pointer-events:none}
.bno{display:block;width:100%;min-height:46px;margin-top:8px;background:none;border:0;color:var(--steel);text-decoration:underline;text-underline-offset:3px;font:400 14.5px var(--bd);cursor:pointer}
.sheet.chg{padding:0 0 calc(16px + env(safe-area-inset-bottom))}
.chg h3{font-size:20px;font-weight:800;padding:14px 20px 12px}
.opts{padding:0 20px}
.opt{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;margin-bottom:12px;position:relative;background:#fff}
.opt.sel{border-color:var(--ink);box-shadow:0 0 0 2px rgba(22,24,28,.08)}
.opt .r{width:20px;height:20px;border-radius:50%;border:2px solid var(--steel2);display:grid;place-items:center}
.opt.sel .r{border-color:var(--red)}
.opt.sel .r:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
.opt b{display:block;font-size:15.5px}
.opt small{color:var(--steel);font-size:13px}
.opt .p{text-align:right;font-family:var(--hd);font-stretch:110%;font-weight:800;font-size:18px}
.opt .p s{display:block;font-family:var(--bd);font-weight:400;color:var(--steel2);font-size:12.5px}
.opt .tg{position:absolute;top:-10px;right:12px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;padding:3px 8px;border-radius:999px}
.keep{display:block;width:calc(100% - 40px);margin:2px 20px 0;min-height:46px;background:none;border:0;color:var(--steel);text-decoration:underline;cursor:pointer;font:400 14.5px var(--bd)}
@media (min-width:700px){.sheet{margin-bottom:24px;border-radius:20px}}

/* ===== Shopify-style payment block ===== */
.paysub{color:#707070;font-size:14px;margin:-4px 0 12px}
.paybox{border:1px solid #1773B0;border-radius:6px;overflow:hidden;background:#F5F5F5}
.payhead{background:#F0F5FA;border-bottom:1px solid #1773B0;padding:15px 16px}
.payhead .l{font-weight:500;font-size:15px;color:#000}
.payhead .radio{width:18px;height:18px;border-radius:50%;border:5px solid #1773B0;background:#fff;flex:none}
.cards{display:flex;gap:5px;align-items:center}
.cards img{width:38px;height:24px;display:block;transition:opacity .2s}
.paybody{background:#F5F5F5;padding:16px;gap:14px}
.paybody .ff input,.paybody .ff select{border:1px solid #DEDEDE;border-radius:5px;height:52px;background:#fff}
.paybody .ff input:focus{border-color:#1773B0;box-shadow:0 0 0 1px #1773B0}
.paybody .ff label{color:#707070}
.cbrand{position:absolute;right:40px;top:50%;transform:translateY(-50%);display:none;align-items:center}
.cbrand img{width:34px;height:22px}
.ff .ico.qm{color:#707070;cursor:help}
.ff .ico.qm svg{width:18px;height:18px}
.paybody .ckb{font-size:14.5px;color:#000;margin-top:2px}
.paybody .ckb input{accent-color:#1773B0}
@media (max-width:420px){.cards img{width:33px;height:21px}.cards{gap:4px}}
.cbrand{background:none;padding:0;border-radius:0}
@media (max-width:480px){#cardExp+label{font-size:14.5px}#cardExp:focus+label,#cardExp:not(:placeholder-shown)+label{font-size:12px}}
@media (max-width:480px){#cardExp+label .dsk{display:none}}