/* Galaxy Kid · ornament checkout — BRIGHT: white/cream cards, pink/purple/cyan galaxy accents, big readable type, big tap targets.
   Phones: one column, summary folded at the top, sticky pay bar. Desktop (≥ 960px): two columns with a sticky order summary. */
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-800.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--ink:#1b1238;--ink2:#463d63;--mute:#5d5675;--line:#e9e2f3;--bg:#fff7fb;--card:#fff;--pink:#d4148f;--pink2:#ff3fb4;--purple:#6a2cf0;--cyan:#0aa5c9;--ok:#0f8a4b;--err:#c4123d;
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color-scheme:light}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;color:var(--ink);font:400 17px/1.5 var(--font);-webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 420px at 100% -10%,rgba(127,227,255,.35),transparent 60%),radial-gradient(800px 420px at -10% 0%,rgba(255,63,180,.18),transparent 60%),var(--bg)}
a{color:var(--purple);font-weight:700}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:8px}
.in{max-width:1140px;margin:0 auto;padding:0 16px}
/* header + progress */
.cohdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.cohdr .in{display:flex;align-items:center;gap:12px;height:60px}
.cologo{text-decoration:none;font:800 21px/1 var(--font);letter-spacing:.04em;color:var(--ink);white-space:nowrap}.cologo i{font-style:normal;color:var(--pink);margin-left:.25em}
.prog{display:flex;gap:6px;margin:0 auto;padding:0;list-style:none;font:700 13px/1 var(--font);color:var(--mute)}
.prog li{display:flex;align-items:center;gap:6px}.prog li+li::before{content:'';width:16px;height:2px;background:var(--line);margin-right:2px}
.prog span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#efe9f8;color:var(--ink2);font-size:12px}
.prog .done span{background:var(--ok);color:#fff}.prog .on{color:var(--ink)}.prog .on span{background:linear-gradient(135deg,var(--pink2),var(--purple));color:#fff}
.prog li:not(.on){font-size:0}.prog li:not(.on) span{font-size:12px}
.lock{font:700 13px var(--font);color:var(--ok);white-space:nowrap}
/* layout */
.cogrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-top:16px;padding-bottom:120px}
.cohead h1{font:800 clamp(28px,6vw,40px)/1.1 var(--font);margin:6px 0 4px;letter-spacing:-.01em}
.cohead h1 span{display:inline-block}.sub{margin:0;color:var(--ink2);font-size:18px}
.back{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:15px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 8px 28px rgba(80,40,140,.07)}
.comain{display:grid;gap:14px;min-width:0}
h2{font:800 20px/1.2 var(--font);margin:6px 0 12px;display:flex;align-items:center;gap:10px}
h2 small{font:700 12px var(--font);color:var(--pink);text-transform:uppercase;letter-spacing:.08em}
form h2:not(:first-child){margin-top:24px}
.n{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pink2),var(--purple));color:#fff;font-size:15px}
/* fields */
.f{display:block;margin:0 0 12px}.f>span{display:block;font:700 15px/1.3 var(--font);margin:0 0 6px;color:var(--ink)}.f em{font-style:normal;font-weight:400;color:var(--mute)}
.f input,.f select{width:100%;min-height:54px;padding:12px 14px;border:2px solid #d9d0ea;border-radius:14px;background:#fff;color:var(--ink);font:400 18px/1.2 var(--font);transition:border-color .15s,box-shadow .15s}
.f select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23463d63' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center}
.f input:focus,.f select:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 4px rgba(106,44,240,.15)}
.f input[aria-invalid=true],.f select[aria-invalid=true]{border-color:var(--err)}
.g2,.g3{display:grid;gap:0 12px}@media(min-width:520px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1.4fr 1fr 1fr}}
.stripebox{min-height:60px;margin-bottom:6px}
/* checks */
.ck{display:flex;gap:12px;align-items:flex-start;padding:12px;margin:0 0 8px;border-radius:14px;background:#fbf8ff;border:2px solid transparent;cursor:pointer;font-size:15.5px;line-height:1.45;color:var(--ink2)}
.ck input{flex:none;width:26px;height:26px;margin:0;accent-color:var(--pink)}.ck:has(input:checked){background:#f2fff7;border-color:#bfe8cf}
.ck.need{border-color:var(--err);background:#fff3f6}.ck.opt{background:transparent;padding:10px 0;margin-top:10px}
.allbtn{min-height:44px;border:2px dashed #d9c8f5;background:transparent;border-radius:12px;padding:8px 14px;font:700 15px var(--font);color:var(--purple);cursor:pointer;width:100%}
.checks.flash{animation:flash .9s 2}@keyframes flash{50%{box-shadow:0 0 0 5px rgba(212,20,143,.35)}}
/* express */
.hint{margin:-4px 0 12px;color:var(--mute);font-size:15px}
.exwrap{position:relative;min-height:52px}
.exblock{position:absolute;inset:0;z-index:2;width:100%;border:2px dashed #e3b6d6;border-radius:12px;background:rgba(255,247,251,.94);font:700 15px var(--font);color:var(--pink);cursor:pointer}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);font:700 14px var(--font);text-transform:uppercase;letter-spacing:.08em}.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
/* pay */
.paybtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:60px;padding:14px 22px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  font:800 19px/1.1 var(--font);color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:0 12px 30px rgba(212,20,143,.28);transition:transform .12s,filter .12s}
.paybtn:hover{filter:brightness(1.07)}.paybtn:active{transform:translateY(1px)}.paybtn[disabled]{opacity:.6;cursor:progress}
#payBtn{margin-top:14px}
.trust{text-align:center;color:var(--mute);font-size:14px;margin:10px 0 0}
.hostednote{margin:0 0 6px;padding:12px 14px;border-radius:14px;background:#effbff;color:#0b5f74;font-weight:700;font-size:16px}
.msg{margin-top:12px;font-weight:700;font-size:16px}.msg.err{color:var(--err);background:#fff3f6;border-radius:12px;padding:12px 14px}.msg.ok{color:var(--ok)}
.dev{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#fff6db;color:#7a5600;font-weight:700;font-size:14px}
.fine{font-size:13.5px;color:var(--mute);line-height:1.5}
/* summary */
.sum{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 28px rgba(80,40,140,.07);overflow:hidden}
.sumtoggle{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:60px;padding:12px 18px;border:0;background:linear-gradient(90deg,#fff0f8,#f0f7ff);font:400 17px var(--font);color:var(--ink);cursor:pointer;text-align:left}
.sumtoggle small{color:var(--mute)}.sumtoggle .st b{font-size:20px}.sumtoggle i{font-style:normal;display:inline-block;transition:transform .2s}.sumtoggle[aria-expanded=true] i{transform:rotate(180deg)}
.sumbody{padding:6px 18px 18px}.sum:not(.open) .sumbody{display:none}
.items{list-style:none;margin:8px 0 0;padding:0}.items li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.items li.ph{display:block;color:var(--mute)}
.items img,.items .noimg{width:56px;height:56px;border-radius:14px;object-fit:cover;background:#f3eefb;border:2px solid #fff;box-shadow:0 0 0 2px #f0d5ec}
.items .nm{font-weight:800;font-size:16px;line-height:1.25}.items .pd{display:block;font-size:14px;color:var(--mute);font-weight:400}.items .pr{font-weight:800}
.items .bad{color:var(--err);font-size:14px;font-weight:700}
.edit{display:inline-flex;min-height:44px;align-items:center;font-size:15px;text-decoration:none}
.tot{margin:6px 0 0}.tot div{display:flex;justify-content:space-between;gap:10px;padding:6px 0}.tot dt{color:var(--ink2)}.tot dt small{display:block;font-size:12.5px;color:var(--mute)}.tot dd{margin:0;font-weight:700;text-align:right}
.tot .save dd{color:var(--ok)}.tot .grand{border-top:2px solid var(--ink);margin-top:6px;padding-top:12px}.tot .grand dt{font-weight:800;color:var(--ink);font-size:19px}.tot .grand dd{font-size:24px;font-weight:800}
#tTax.pending{font-weight:400;color:var(--mute);font-size:14px}
.freeship{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:#effbff;color:#0b5f74;font-weight:700;font-size:15px}
.assure{margin-top:14px;padding:14px;border-radius:16px;background:linear-gradient(135deg,#fff0f8,#f3efff);font-size:15px}.assure p{margin:0 0 8px}.assure p:last-child{margin:0}.assure .xm{font-weight:700;color:#0f6e3b}.assure .xm.late{color:#8a5a00}
.badges{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.badges li{font:700 13px var(--font);padding:7px 10px;border-radius:999px;background:#f6f3fb;color:var(--ink2)}
/* sticky pay bar (phones) */
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:block;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(80,40,140,.1);transition:transform .2s}
.paybar.away{transform:translateY(110%)}.paybar .pbt{display:flex;flex-direction:column;line-height:1.1}.paybar small{color:var(--mute);font-size:13px}.paybar b{font-size:22px}.paybar .paybtn{min-height:56px;font-size:18px}
.empty{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(255,247,251,.97)}.empty .card{max-width:420px;text-align:center}
/* desktop: two columns, sticky summary */
@media(min-width:960px){
  .cogrid{grid-template-columns:minmax(0,1fr) 400px;column-gap:32px;align-items:start;padding-top:22px;padding-bottom:60px}
  .cohead{grid-column:1}.comain{grid-column:1}
  .sum{grid-column:2;grid-row:1/span 2;position:sticky;top:80px}.sum .sumbody{display:block!important}.sumtoggle{pointer-events:none}.sumtoggle i{display:none}
  .card{padding:24px}.paybar{display:none}.prog li:not(.on){font-size:13px}
}
/* the bright launch */
.launch{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,#fff 0,#ffe9f6 45%,#e8f6ff 100%);animation:fadein .25s}
.launch .box{text-align:center;padding:20px}.launch .rk{font-size:84px;display:inline-block;animation:lift 1.5s cubic-bezier(.5,0,.75,0) forwards}.launch .rk::after{content:'';display:block;width:12px;height:60px;margin:-6px auto 0;border-radius:6px;background:linear-gradient(#ffb02e,#ff3fb4,transparent);filter:blur(1px)}
.launch p{font:800 24px/1.3 var(--font);color:var(--ink);margin:16px 0 0}.launch .stars i{position:absolute;width:8px;height:8px;border-radius:50%;animation:tw 1.2s infinite alternate}
@keyframes lift{0%{transform:translateY(20px)}25%{transform:translateY(0) rotate(-3deg)}100%{transform:translateY(-120vh)}}
@keyframes tw{to{opacity:.2;transform:scale(.5)}}@keyframes fadein{from{opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:520px){.lock{display:none}.cohdr .in{gap:8px}.prog{margin-right:0}.cologo{font-size:19px}}
body{overflow-x:hidden}
.prog .on{white-space:nowrap}
@media(max-width:519px){.g3{grid-template-columns:1fr 1fr}.g3>.f:first-child{grid-column:1/-1}.sumtoggle small{display:none}.sumtoggle{font-size:16px}.ck{font-size:15px}}

/* ── one-page order (Oct 17): the ornaments are built right here ── */
.paybar .pbrow{display:flex;gap:12px;align-items:center}.paybar .pbcw{margin:0 0 6px;font-size:12.5px;line-height:1.35;color:var(--ink2)}.paybar .pbcw a{font-weight:700}
.cw{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#f7f3ff;color:var(--ink2);font-size:14.5px;line-height:1.45}
form .cw{margin:16px 0 0}
.picks{display:grid;gap:10px}.picks .hint{margin:0 0 4px}
.pickbtn{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;width:100%;min-height:72px;padding:14px 18px;border:2px solid #e3d8f6;border-radius:18px;background:#fff;cursor:pointer;text-align:left;font:400 16px var(--font);color:var(--ink)}
.pickbtn b{font-size:19px}.pickbtn span{font-weight:800;color:var(--pink);font-size:18px}.pickbtn i{grid-column:1/-1;font-style:normal;color:var(--mute);font-size:14.5px}
.pickbtn:hover{border-color:var(--purple)}.pickbtn.pet{background:linear-gradient(90deg,#fff,#f2fbff)}.pickbtn[disabled]{opacity:.5;cursor:not-allowed}
.orn{border:2px solid var(--line);border-radius:18px;padding:14px;margin:0 0 12px;background:#fff}.orn.pet{background:linear-gradient(180deg,#fbfeff,#fff)}
.orn.flash{animation:flash .9s 2}@keyframes flash{50%{box-shadow:0 0 0 5px rgba(212,20,143,.35)}}
.ohead{display:flex;align-items:center;gap:10px;margin:0 0 10px}.ohead>b{font-size:18px}.ohead .op{margin-left:auto;font-weight:800}
.ohead .rm{border:0;background:#f5f0fb;color:var(--ink2);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:15px}
.seg{display:inline-flex;border:2px solid #e3d8f6;border-radius:999px;overflow:hidden}.seg button{border:0;background:#fff;min-height:36px;min-width:52px;padding:4px 12px;font:700 14px var(--font);color:var(--ink2);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--purple);color:#fff}.seg button[disabled]{opacity:.4}
.addphoto{display:grid;justify-items:center;gap:4px;width:100%;min-height:150px;padding:18px;border:3px dashed #d7c3f3;border-radius:18px;background:linear-gradient(135deg,#fff5fb,#f1f9ff);cursor:pointer;font:400 15px var(--font);color:var(--ink)}
.addphoto .cam{font-size:40px;line-height:1}.addphoto b{font-size:20px}.addphoto small{color:var(--mute);font-size:14.5px}.addphoto:hover{border-color:var(--purple)}
.shot{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:10px;border-radius:16px;background:#f2fff7;margin:0 0 6px}
.shot img,.shot .noimg{width:96px;height:96px;object-fit:cover;border-radius:14px;background:#eee;display:block}
.shot>div{display:grid;gap:3px;min-width:0}.shot b.ok{color:var(--ok);font-size:17px}.shot b.bad{color:var(--err);font-size:17px}.shot small{color:var(--ink2);font-size:14px}
.shot.retake{background:#fff3f6}.shot.busy{background:#f3efff}.shot .scan{font-size:16px;color:var(--purple)}
.shot .bar{display:block;height:6px;border-radius:3px;background:#e3d8f6;overflow:hidden}.shot .bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--pink2),var(--purple),var(--cyan));animation:scanbar 1.1s ease-in-out infinite alternate}
@keyframes scanbar{from{transform:translateX(-10%)}to{transform:translateX(160%)}}
.acts{display:flex;flex-wrap:wrap;gap:4px 14px}
.linkbtn{border:0;background:none;padding:6px 0;min-height:40px;font:700 15px var(--font);color:var(--purple);cursor:pointer;text-align:left}
.perr{margin:6px 0 0;color:var(--err);font-weight:700;font-size:15px}.perr:empty{display:none}
.orn .nm{margin:10px 0 6px}.f>span .count{float:right;font-style:normal;color:var(--mute);font-weight:400}
.more{margin:4px 0 0}.more summary{cursor:pointer;min-height:40px;display:flex;align-items:center;color:var(--ink2);font-size:15px;font-weight:700}
.more .f{margin-top:8px}.swatches{display:flex;gap:10px;margin:6px 0 4px}.swatches button{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #ddd;cursor:pointer}.swatches button[aria-pressed=true]{box-shadow:0 0 0 3px var(--purple)}
.pickpet{margin:8px 0;padding:10px;border-radius:14px;background:#fff8e6}.subjects{position:relative;margin-top:8px}.subjects img{display:block;width:100%;border-radius:12px}
.subjects button{position:absolute;border:3px solid #fff;border-radius:12px;background:rgba(106,44,240,.18);cursor:pointer}.subjects button span{position:absolute;top:4px;left:4px;background:var(--purple);color:#fff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-weight:800}
.addrow{display:grid;gap:8px}@media(min-width:520px){.addrow{grid-template-columns:1fr 1fr}}
.addbtn{min-height:52px;border:2px dashed #d9c8f5;border-radius:14px;background:#fff;font:700 16px var(--font);color:var(--purple);cursor:pointer;padding:8px 12px}.addbtn.pet{border-color:#9fdcec;color:#0b6f87}
.exblock{font-size:16px}
.closed{margin:30px auto;max-width:520px;text-align:center}
input,select,textarea{font-size:max(16px,1em)}
.subjects{max-width:440px}
#linkAuth{min-height:84px}#addressEl{min-height:190px}#paymentEl{min-height:300px}#express{min-height:54px}
/* the agreement line (v d): normal size, full contrast, right next to the buttons */
.cw{margin:0 0 10px;padding:0;background:none;color:var(--ink);font-size:16px;line-height:1.45;font-weight:400}.cw a{color:var(--purple);font-weight:700;text-decoration:underline}
form .cw{margin:14px 0 0}form .cw+.paybtn,#payBtn{margin-top:8px}
.paybar .pbcw{margin:0 0 6px;font-size:15px;line-height:1.3;color:var(--ink)}.paybar .pbcw a{color:var(--purple);font-weight:700;text-decoration:underline}

/* ── layout hardening (Oct 17 · mobile fix) ──
   · nothing may push the page wider than the screen (iOS ignores body{overflow-x:hidden} and zooms the whole page out instead)
   · every card and every Stripe mount point is exactly the column width, so Stripe measures the real width and draws full-size buttons/fields
   · phones: the header scrolls away with the page (no bar slicing through the cards — the sticky pay bar is the one thing that follows you);
     desktop keeps a solid sticky header */
html{overflow-x:hidden}@supports (overflow:clip){html,body{overflow-x:clip}}
.cogrid>*,.comain>*{min-width:0;max-width:100%}
.card,.stripebox,.exwrap,#express,#linkAuth,#addressEl,#paymentEl{width:100%;min-width:0;max-width:100%}
.stripebox,.exwrap{display:block;overflow:visible;transform:none}
.exblock{border-radius:14px}
.express h2{margin-bottom:8px}.express .cw{margin-bottom:12px}
.cohdr{background:#fff;box-shadow:0 1px 0 var(--line),0 6px 18px rgba(80,40,140,.06);border-bottom:0}
.cohdr .in{min-width:0}.cologo{flex:none}
.prog{min-width:0;flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.prog li{flex:none;white-space:nowrap}
@media(max-width:959px){
  html{scroll-padding-top:12px}
  .cohdr{position:relative}
  .cohdr .in{height:56px;justify-content:space-between}
  .prog{margin:0 0 0 auto}
  .cogrid{gap:12px;padding-top:12px}
  .comain{gap:12px}
  .card,.sum{border-radius:18px;border:1px solid var(--line);box-shadow:0 4px 16px rgba(80,40,140,.06)}
  .card{padding:16px}
  .orn{border-width:1.5px;border-radius:16px;padding:12px}
  .addbtn{border-radius:14px}
  .or{margin:2px 4px}
}
@media(max-width:400px){
  .in{padding:0 12px}
  .cologo{font-size:18px}
  .prog{gap:4px}.prog li+li::before{width:8px;margin-right:0}
  .card{padding:14px}
}
@media(min-width:960px){.cohdr{position:sticky}}
@media(max-width:360px){.cologo{font-size:16px}.prog li+li::before{display:none}.prog span{width:22px;height:22px}}
/* promo code (Oct 18): one quiet link; opens a field; applied = a green chip. A free code hides the card/wallet/address and shows name + email */
.promo{margin:-6px 4px 14px;text-align:right}
.promolink{font-size:14.5px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;text-align:right}
.promoform{margin:6px 0 0;padding:14px;border-radius:18px;background:var(--card);border:2px solid var(--line);text-align:left}
.promoform .f{margin:0}.f>.promorow{display:flex;gap:8px;margin:0;font:inherit}.promorow input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.04em}
.applybtn{flex:none;min-height:54px;padding:0 20px;border:0;border-radius:14px;background:var(--ink);color:#fff;font:800 16px var(--font);cursor:pointer}.applybtn:disabled{opacity:.6;cursor:default}
.promoon{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 0;padding:10px 14px;border-radius:14px;background:#eafaf1;border:2px solid #9fe0bd;color:#0b5e34;font-size:15.5px;text-align:left}
.promoon .linkbtn{min-height:32px;padding:0}
body.free .paybtn{background:linear-gradient(135deg,#16a35a,#0f8a4b)}
.assure .handnote{font-weight:700;color:#0f6e3b}body.free .assure .handnote{margin:0}