/* The custom order page (render-custom-order-html.js). Built on product.css. */
.co-page [hidden]{display:none !important}
.co{max-width:760px;margin:0 auto}
.co h1{font:700 32px/1.2 var(--font-head);margin:12px 0 6px}
.co .lead{font-size:18px;margin:0 0 6px}
.co .help{margin:0 0 8px;font-size:15px;color:#3a3a3c}
.co .notice{margin:12px 0;padding:12px 14px;border-radius:10px;background:#eef4ff;border:1px solid #b9cdf3;font-size:16px}
.step-h{display:flex;align-items:center;gap:10px;margin:32px 0 10px;font:700 22px/1.3 var(--font-head)}
.step-n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent-raw);color:var(--on-accent);font:700 16px var(--font-body);flex:none}
.req{color:#b3261e}
.field{margin:14px 0}
.field .lab,.chips legend{display:block;font-weight:600;font-size:16px;margin:0 0 6px;padding:0}
.co textarea{width:100%;min-height:110px;padding:10px 12px;border:2px solid #c7c7cc;border-radius:10px;font:17px var(--font-body);resize:vertical}
.field.bad textarea,.field.bad .drop,.field.bad .size-grid input{border-color:#b3261e}
.field-err{margin:6px 0 0;color:#b3261e;font-size:15px;font-weight:600}
.seg{display:grid;grid-template-columns:1fr 1fr;border:2px solid #c7c7cc;border-radius:26px;overflow:hidden;max-width:520px}
.seg button{min-height:52px;border:0;background:#fff;font:700 17px var(--font-body);color:#1d1d1f;cursor:pointer}
.seg button.on{background:var(--accent-raw);color:var(--on-accent)}
.seg.units{max-width:400px;margin-bottom:12px}

.drop{display:grid;place-items:center;gap:4px;min-height:120px;border:2px dashed #c7c7cc;border-radius:14px;text-align:center;padding:16px;font-size:16px;color:#3a3a3c;cursor:pointer}
.drop:hover,.drop:focus-within{border-color:var(--accent-raw)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop strong{font-size:17px;color:var(--accent)}
.drop.full{display:none}
.up-thumbs{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 0;padding:0}
.up-thumbs li{display:grid;justify-items:center}
.up-thumbs img{width:96px;height:96px;border-radius:10px;object-fit:cover;border:1px solid #e5e5ea}
.up-status{margin:8px 0 0;font-weight:600}

.chip-grid{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px 6px 8px;border:2px solid #c7c7cc;border-radius:24px;font-size:16px;cursor:pointer}
.chip input{width:20px;height:20px;accent-color:var(--accent-raw)}
.chip img,.chip .swatch{width:30px;height:30px;border-radius:50%;object-fit:cover}
.chip:has(input:checked){border-color:var(--accent-raw);background:#faf6f1}

.size-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;align-items:center;max-width:520px}
.size-grid.two{grid-template-columns:auto 1fr}
.size-grid .dim{font-weight:700;font-size:17px;min-width:64px}
.unit{position:relative}
.unit input{width:100%;min-height:52px;padding:10px 40px 10px 12px;border:2px solid #c7c7cc;border-radius:10px;font:18px var(--font-body)}
.unit span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#55595e;font-weight:600}
.size-out{margin:10px 0 0;font-size:18px;font-weight:700;min-height:1.4em}

.freight{margin:28px 0 0;padding:12px 14px;border-radius:10px;background:#f6f1ea;font-size:16px}
.add-err{margin:12px 0 0;color:#b3261e;font-weight:600;font-size:16px}
.co .actions .btn{width:100%}

.in-list{margin:18px 0 8px;padding:16px;border:1px solid #e1e1e6;border-radius:14px}
.in-list h2{margin:0 0 10px;font:700 18px/1.3 var(--font-body)}
.in-list-items{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.in-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 12px;align-items:center}
.in-item.current{background:#faf6f1;border-radius:10px;padding:6px}
.in-item img,.in-item .ph{width:64px;height:64px;border-radius:8px;object-fit:cover;background:#f2f2f4;display:block}
.in-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.in-name{font-weight:700;font-size:16px;overflow-wrap:anywhere}
.in-sum{font-size:15px;color:#3a3a3c;overflow-wrap:anywhere}
.in-ctl{grid-column:2;display:flex;gap:16px}
.link-btn{min-height:44px;padding:8px 2px;border:0;background:none;font:600 16px var(--font-body);color:var(--accent);text-decoration:underline;cursor:pointer;display:inline-flex;align-items:center}
.link-btn.del{color:#b3261e}