/* checkout.css — GENERATED by tools/v3_commerce.py (edit it there, never here). The v3 checkout dialog (#checkout, driven by
   checkout.js), the shared form fields (.fld, .fset, .chip, .file) and the payment toast (#pay-note.pay-toast).
   Linked by every v3 shop page; reads v3.css tokens. */

/* ------------------------------------------------------------------ form fields (dialog + contact) */
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.fld-l{font:500 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.fld-l small{margin-left:8px;font:400 13px/1.3 var(--font-text);letter-spacing:0;text-transform:none;color:var(--fg-3)}
.fld input,.fld textarea{width:100%;min-height:52px;padding:12px 14px;background:var(--ink);border:0;border-radius:var(--radius-ui);box-shadow:inset 0 0 0 1px var(--line-strong);
  color:var(--fg-1);font:400 17px/1.4 var(--font-text);transition:box-shadow var(--t-micro);-webkit-appearance:none;appearance:none}
.fld textarea{min-height:148px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:var(--fg-3);opacity:1}
.fld input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 1px var(--line-strong),inset 0 0 0 100px var(--ink);-webkit-text-fill-color:var(--fg-1);caret-color:var(--fg-1)}
@media (hover:hover){.fld input:hover,.fld textarea:hover{box-shadow:inset 0 0 0 1px var(--fg-3)}}
.fld input:focus-visible,.fld textarea:focus-visible,.fld input:focus,.fld textarea:focus{outline:2px solid var(--focus);outline-offset:2px;box-shadow:inset 0 0 0 1px var(--fg-1)}
.fset{border:0;padding:0;margin:0;min-width:0}
.fset>legend{float:left;width:100%;padding:0;margin:0 0 12px}
.fset>legend+*{clear:left}
.chips-f{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;max-width:100%}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--radius-ui);box-shadow:inset 0 0 0 1px var(--line-strong);
  font:400 15px/1.25 var(--font-text);color:var(--fg-2);transition:background-color var(--t-micro),color var(--t-micro),box-shadow var(--t-micro)}
@media (hover:hover){.chip:hover span{box-shadow:inset 0 0 0 1px var(--fg-3);color:var(--fg-1)}}
.chip input:checked+span{background:var(--fg-1);color:var(--ink);box-shadow:none}
.chip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.file{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:10px 16px;border:1px dashed var(--line-strong);border-radius:var(--radius-ui);min-width:0;cursor:pointer}
.file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file span{font-size:15px;line-height:1.3;color:var(--fg-1)}
.file b{font:400 13px/1.35 var(--font-text);color:var(--fg-3);overflow-wrap:anywhere}
.file b:empty{display:none}
.file.has{border-style:solid;border-color:var(--fg-3)}
.file:focus-within{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:599px){.files{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ the dialog */
.co{width:min(580px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:0;background:var(--ink-2);color:var(--fg-1);
  box-shadow:0 0 0 1px var(--line-strong),0 40px 120px rgba(0,0,0,.6);overflow:auto;overscroll-behavior:contain}
.co::backdrop{background:rgba(5,5,5,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.co-in{display:flex;flex-direction:column;gap:var(--s-5);padding:clamp(20px,4vw,36px)}
.co-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-8px}
.co-top .label{display:flex;align-items:center;gap:8px;min-width:0}
.co-top svg{width:12px;height:14px;flex:none}
.co-close{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;flex:none;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.co-close i{position:relative;display:block;width:12px;height:12px}
.co-close i::before,.co-close i::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.co-close i::after{transform:rotate(-45deg)}
@media (hover:hover){.co-close:hover{color:var(--fg-1)}}
.co-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.co-sum:empty{display:none}
.co-sum .s-name{font:500 17px/1.3 var(--font-text);min-width:0}
.co-sum .s-amt{font:500 clamp(28px,4vw,36px)/1 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.co-sum .s-meta{grid-column:1/-1;font-size:14px;line-height:1.45;color:var(--fg-3)}
.co-opts{display:flex;flex-direction:column;gap:10px}
.co-opts:empty{display:none}
.co-lab{font:500 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.co-lab small{margin-left:6px;font:400 13px/1.3 var(--font-text);letter-spacing:0;text-transform:none;color:var(--fg-3)}
.co-opt{font:400 15px/1.35 var(--font-text);letter-spacing:0;text-transform:none;color:var(--fg-1);display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:52px;padding:10px 14px;border-radius:var(--radius-ui);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;font-size:15px;line-height:1.35}
.co-opt input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--fg-1)}
.co-opt span{flex:1 1 160px;min-width:0}
.co-opt b{font-weight:500;white-space:nowrap}
.co-opt:has(input:checked){box-shadow:inset 0 0 0 1px var(--fg-1)}
.co-terms{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--radius-ui);width:fit-content;max-width:100%}
.co-terms button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:var(--radius-ui);font:500 15px/1 var(--font-text);color:var(--fg-2)}
.co-terms button[aria-checked="true"]{background:var(--fg-1);color:var(--ink)}
.co-terms em{font:500 10.5px/1 var(--font-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.co-form{display:flex;flex-direction:column;gap:var(--s-4)}
.co-step{display:flex;flex-direction:column;gap:var(--s-4)}
.co-step[hidden]{display:none}
.co-step-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;color:var(--fg-2)}
.co-step-h b{color:var(--fg-1);font-weight:500}
.co-step-h span{font:400 13px/1.3 var(--font-text);letter-spacing:0;text-transform:none;color:var(--fg-3)}
.co-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
@media (max-width:519px){.co-row{grid-template-columns:minmax(0,1fr)}}
.co .btn{width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:12px}
.co-ms{display:flex;flex-direction:column;gap:8px}
.co-m{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:var(--radius-ui);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer}
.co-m input,.co-ok input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--fg-1)}
.co-m span{min-width:0}
.co-m b{display:block;font:500 16px/1.3 var(--font-text)}
.co-m small{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--fg-3)}
.co-m:has(input:checked){box-shadow:inset 0 0 0 1px var(--fg-1)}
.co-ok{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--fg-2);cursor:pointer}
.co-back{align-self:center}
.co-msg{color:var(--red-text);font-size:15px;line-height:1.45}
.co-msg:empty{display:none}
.co-done{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--fg-1)}
.co-done[hidden]{display:none}
.co-done h3{font:500 clamp(24px,3vw,32px)/1.1 var(--font-display);letter-spacing:-.015em}
.co-done p{color:var(--fg-2);font-size:16px;line-height:1.5}
.co-fine{font-size:13px;line-height:1.5;color:var(--fg-3)}
.co .tl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--line-strong)}
@media (max-width:599px){
  .co{width:100%;height:100%;max-height:100%;margin:0;box-shadow:none}
  .co-in{min-height:100%;padding-bottom:max(24px,env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------------ payment toast (?pay=cancelled on a shop page) */
.pay-toast{position:fixed;z-index:70;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100% - 32px));
  display:flex;align-items:flex-start;gap:16px;padding:16px 12px 16px 20px;background:var(--paper);color:var(--paper-ink);font-size:15px;line-height:1.45;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pay-toast p{flex:1 1 auto;min-width:0}
.pay-toast b{font-weight:600}
.pay-toast .pt-x{flex:none;min-height:32px;padding:0 8px;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-ink)}
.pay-toast .pt-x:focus-visible{outline-color:var(--paper-ink);box-shadow:0 0 0 2px var(--paper)}