/* 3318 Team Kit Order Form – scoped so the theme can't clash */
:is(#kof,#kof-thanks) [hidden]{display:none!important}
:is(#kof,#kof-thanks){all:initial;display:block;position:relative}
:is(#kof,#kof-thanks) *,:is(#kof,#kof-thanks) *::before,:is(#kof,#kof-thanks) *::after{box-sizing:border-box}
:is(#kof,#kof-thanks) :is(h1,h2,h3,p,ul,fieldset,legend,label,pre,dl,dd,dt){padding:0;border:0;letter-spacing:normal;line-height:inherit;font-weight:inherit}
:is(#kof,#kof-thanks) :is(h1,h2,h3){padding-bottom:0}
:is(#kof,#kof-thanks) :is(input,select,textarea,button){margin:0;box-shadow:none;line-height:1.3;text-transform:none;letter-spacing:normal;height:auto;min-height:0}
:is(#kof,#kof-thanks) input[type=checkbox],:is(#kof,#kof-thanks) input[type=radio]{appearance:auto;-webkit-appearance:auto;width:18px;height:18px;margin:0}
:is(#kof,#kof-thanks) a{transition:none}
:is(#kof,#kof-thanks){--bg:#000000; --surface:#111111; --raised:#191919; --ink:#ffffff; --text:#d6d6d6; --muted:#adadad; --dim:#7a7a7a; --line:#2a2a2a;
  --accent:#ffffff; --accent-ink:#000000; --cyan:#00e1ff; --pink:#ff3071; --ok:#5df2a0; --error:#ff3071;
  --kid:var(--cyan); --women:var(--dim); --field:#0a0a0a;
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --body:"Roboto Condensed","Arial Narrow",Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;}
:is(#kof,#kof-thanks), :is(#kof,#kof-thanks) *{box-sizing:border-box}
:is(#kof,#kof-thanks){background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;padding:24px 0 48px}
:is(#kof,#kof-thanks) .top,:is(#kof,#kof-thanks) .wrap,:is(#kof,#kof-thanks) .bottom{max-width:1080px;margin:0 auto}
:is(#kof,#kof-thanks) .top{margin-bottom:22px}
:is(#kof,#kof-thanks) .brand{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
:is(#kof,#kof-thanks) .logo{width:160px;max-width:100%;height:auto;flex:none;display:block}
:is(#kof,#kof-thanks) .brand .t{min-width:0;flex:1}
:is(#kof,#kof-thanks) .eyebrow{font-family:var(--body);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
:is(#kof,#kof-thanks) h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,58px);line-height:1;margin:6px 0 10px;text-transform:uppercase;letter-spacing:-1px;color:var(--ink);text-wrap:balance}
:is(#kof,#kof-thanks) .lede{color:var(--muted);max-width:64ch;margin:0}
:is(#kof,#kof-thanks) .mail{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:3px;user-select:all}
:is(#kof,#kof-thanks) .banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:10px 14px;border:1px dashed var(--line);border-radius:6px;font-size:14px;color:var(--muted)}
:is(#kof,#kof-thanks) .wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media (max-width:880px){:is(#kof,#kof-thanks) .wrap{grid-template-columns:minmax(0,1fr)}}
:is(#kof,#kof-thanks) main{display:flex;flex-direction:column;gap:14px;min-width:0}
:is(#kof,#kof-thanks) .card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px}
:is(#kof,#kof-thanks) h2{font-family:var(--display);font-weight:400;font-size:28px;margin:0;text-transform:uppercase;letter-spacing:-.5px;line-height:1.05;color:var(--ink)}
:is(#kof,#kof-thanks) h3{font-family:var(--body);font-size:13px;text-transform:uppercase;letter-spacing:.18em;margin:22px 0 10px;color:var(--muted);font-weight:700}
:is(#kof,#kof-thanks) .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
:is(#kof,#kof-thanks) .f{display:flex;flex-direction:column;gap:4px}
:is(#kof,#kof-thanks) .f label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
:is(#kof,#kof-thanks) .f input{font:16px var(--body);padding:10px 11px;border:1px solid var(--line);border-radius:4px;background:var(--field);color:var(--ink)}
:is(#kof,#kof-thanks) .glitch{position:relative;display:inline-block}
:is(#kof,#kof-thanks) .glitch::before,:is(#kof,#kof-thanks) .glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;color:var(--ink);background:transparent;overflow:hidden;opacity:0}
:is(#kof,#kof-thanks) .glitch::before{left:-2px;text-shadow:-3px 0 var(--pink)}
:is(#kof,#kof-thanks) .glitch::after{left:2px;text-shadow:-3px 0 var(--cyan)}
:is(#kof,#kof-thanks) .glitch.live::before{animation:kof-noiseA 3.2s infinite steps(1),kof-show 6s infinite}
:is(#kof,#kof-thanks) .glitch.live::after{animation:kof-noiseB 2.6s infinite steps(1),kof-show 6s infinite .15s}
:is(#kof,#kof-thanks) .glitch.live{animation:kof-jitter 6s infinite}
:is(#kof,#kof-thanks) .glitch.kof-flash::before{animation:kof-noiseA .45s steps(1),kof-flash .45s}
:is(#kof,#kof-thanks) .glitch.kof-flash::after{animation:kof-noiseB .45s steps(1),kof-flash .45s}
@keyframes kof-show{0%,78%,100%{opacity:0}80%,92%{opacity:1}}
@keyframes kof-flash{0%,100%{opacity:1}}
@keyframes kof-noiseA{0%{clip-path:inset(12% 0 70% 0)}20%{clip-path:inset(55% 0 20% 0)}40%{clip-path:inset(80% 0 5% 0)}60%{clip-path:inset(30% 0 52% 0)}80%{clip-path:inset(5% 0 85% 0)}100%{clip-path:inset(62% 0 30% 0)}}
@keyframes kof-noiseB{0%{clip-path:inset(70% 0 10% 0)}25%{clip-path:inset(20% 0 66% 0)}50%{clip-path:inset(45% 0 40% 0)}75%{clip-path:inset(88% 0 2% 0)}100%{clip-path:inset(8% 0 78% 0)}}
@keyframes kof-jitter{0%,79%,93%,100%{transform:none}81%{transform:translateX(-2px) skewX(-4deg)}84%{transform:translateX(2px)}88%{transform:translateX(-1px) skewX(3deg)}}
:is(#kof,#kof-thanks) details.product{background:var(--surface);border:1px solid var(--line);border-radius:6px}
:is(#kof,#kof-thanks) details.product[open]{border-color:#4a4a4a;background:var(--raised)}
:is(#kof,#kof-thanks) details.product>summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
:is(#kof,#kof-thanks) details.product>summary::-webkit-details-marker{display:none}
:is(#kof,#kof-thanks) details.product>summary:hover h2::before,:is(#kof,#kof-thanks) details.product>summary:hover h2::after{animation:kof-noiseA .5s infinite steps(1),kof-flash .5s infinite;opacity:1}
:is(#kof,#kof-thanks) .chev{width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;flex:none}
:is(#kof,#kof-thanks) details[open]>summary .chev{transform:rotate(45deg)}
:is(#kof,#kof-thanks) .ptitle{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
:is(#kof,#kof-thanks) .pprice{font-size:13px;color:var(--muted);letter-spacing:.04em}
:is(#kof,#kof-thanks) .count{font-family:var(--display);font-size:19px;padding:1px 11px;border-radius:999px;background:var(--field);color:var(--dim);border:1px solid var(--line);font-variant-numeric:tabular-nums}
:is(#kof,#kof-thanks) .count.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
:is(#kof,#kof-thanks) .count.kof-bump{animation:kof-bump .35s steps(2)}
@keyframes kof-bump{0%{box-shadow:-3px 0 var(--pink),3px 0 var(--cyan);transform:translateX(-1px)}50%{box-shadow:3px 0 var(--pink),-3px 0 var(--cyan);transform:translateX(1px)}100%{box-shadow:none;transform:none}}
:is(#kof,#kof-thanks) .pbody{padding:0 20px 20px;border-top:1px solid var(--line)}
:is(#kof,#kof-thanks) .sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
:is(#kof,#kof-thanks) .group-label{grid-column:1/-1;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:700}
:is(#kof,#kof-thanks) .size{display:flex;flex-direction:column;gap:3px;background:var(--field);border:1px solid var(--line);border-radius:4px;padding:7px}
:is(#kof,#kof-thanks) .size label{font-family:var(--display);font-size:18px;letter-spacing:0;line-height:1.1;color:var(--ink)}
:is(#kof,#kof-thanks) .size small{font-size:11px;color:var(--muted);line-height:1.2;min-height:13px}
:is(#kof,#kof-thanks) .size.kids label{color:var(--cyan)}
:is(#kof,#kof-thanks) .size.women label{color:#cfcfcf}
:is(#kof,#kof-thanks) .size input{width:100%;font:500 16px var(--mono);padding:5px 7px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}
:is(#kof,#kof-thanks) .size.has{border-color:var(--ink)}
:is(#kof,#kof-thanks) .size.kids.has{border-color:var(--cyan)}
:is(#kof,#kof-thanks) input:focus-visible,:is(#kof,#kof-thanks) button:focus-visible,:is(#kof,#kof-thanks) summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
:is(#kof,#kof-thanks) .rows{display:flex;flex-direction:column;gap:6px}
:is(#kof,#kof-thanks) .row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:center}
:is(#kof,#kof-thanks) .tag{font-family:var(--display);font-size:16px;text-align:center;padding:6px 4px;border-radius:4px;background:var(--ink);color:#000;text-transform:uppercase}
:is(#kof,#kof-thanks) .tag.kids{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 1.5px var(--cyan)}
:is(#kof,#kof-thanks) .tag.women{background:var(--women);color:#000}
:is(#kof,#kof-thanks) .row input,:is(#kof,#kof-thanks) .num input{font:16px var(--body);padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--field);color:var(--ink);width:100%}
:is(#kof,#kof-thanks) .printnote{font-size:14px;color:var(--text);border-left:3px solid var(--cyan);background:var(--field);padding:9px 12px;margin:-2px 0 12px;border-radius:0 4px 4px 0}
:is(#kof,#kof-thanks) .printnote b{color:var(--ink)}
:is(#kof,#kof-thanks) textarea.notes{width:100%;font:15px/1.5 var(--body);padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:var(--field);color:var(--ink);resize:vertical}
:is(#kof,#kof-thanks) .kithead,:is(#kof,#kof-thanks) .kitrow{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 64px minmax(0,1.5fr);gap:8px;align-items:center}
:is(#kof,#kof-thanks) .kithead.gk,:is(#kof,#kof-thanks) .kitrow.gk{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 64px minmax(0,1.4fr) 104px}
:is(#kof,#kof-thanks) .kithead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
:is(#kof,#kof-thanks) .kitrows{display:flex;flex-direction:column;gap:6px}
:is(#kof,#kof-thanks) .kn{font-family:var(--display);font-size:18px;color:var(--dim);text-align:center}
:is(#kof,#kof-thanks) .kitrow select,:is(#kof,#kof-thanks) .kitrow input[type=text]{width:100%;min-width:0;font:15px var(--body);padding:8px 8px;border:1px solid var(--line);border-radius:4px;background:var(--field);color:var(--ink)}
:is(#kof,#kof-thanks) .kitrow select.bad{border-color:var(--error)}
:is(#kof,#kof-thanks) .kitrow .sleeve{padding:7px 9px;font-size:13px}
:is(#kof,#kof-thanks) .kitrow .sleeve input:disabled+span{opacity:.4}
@media (max-width:640px){:is(#kof,#kof-thanks) .kithead{display:none}
:is(#kof,#kof-thanks) .kitrow,:is(#kof,#kof-thanks) .kitrow.gk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--field)}
:is(#kof,#kof-thanks) .kitrow .kn{grid-column:1/-1;text-align:left;font-size:16px}
:is(#kof,#kof-thanks) .kitrow .kn::before{content:"Player "}}
:is(#kof,#kof-thanks) .signoff{display:flex;flex-direction:column;align-items:center;gap:14px;padding-block:34px 10px;text-align:center}
:is(#kof,#kof-thanks) .by{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(52px,11vw,124px);line-height:.9;letter-spacing:-.03em;color:var(--ink)}
:is(#kof,#kof-thanks) .mini-logo{width:72px;height:auto;opacity:.9}
:is(#kof,#kof-thanks) .thanks{position:fixed;inset:0;z-index:50;background:#000;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 24px) 16px calc(env(safe-area-inset-bottom,0px) + 24px);overflow:auto}
:is(#kof,#kof-thanks) .th-noise{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
:is(#kof,#kof-thanks) .th-scan{position:absolute;left:0;right:0;height:18vh;top:-20vh;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,225,255,.10) 45%,rgba(255,48,113,.12) 55%,transparent)}
:is(#kof,#kof-thanks) .th-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;max-width:560px}
:is(#kof,#kof-thanks) .th-logo{width:min(200px,50vw);height:auto;margin-bottom:6px}
:is(#kof,#kof-thanks) .th-ref{margin:0;font-size:13px;letter-spacing:.32em;color:var(--muted);font-family:var(--body)}
:is(#kof,#kof-thanks) .th-title{font-family:var(--display);font-weight:400;font-size:clamp(64px,16vw,150px);line-height:.88;letter-spacing:-.03em;margin:0;text-transform:uppercase}
:is(#kof,#kof-thanks) .th-sub{margin:0;font-family:var(--display);font-size:clamp(22px,4vw,32px);text-transform:uppercase;color:var(--cyan);letter-spacing:.02em}
:is(#kof,#kof-thanks) .th-total{font-family:var(--display);font-size:clamp(40px,8vw,64px);color:var(--ink);line-height:1;margin-top:10px;font-variant-numeric:tabular-nums}
:is(#kof,#kof-thanks) .th-msg{color:var(--text);max-width:46ch;margin:4px 0 14px}
:is(#kof,#kof-thanks) .thanks.go{animation:kof-flick .45s steps(1)}
:is(#kof,#kof-thanks) .thanks.go .th-scan{animation:kof-sweep 1.6s .1s ease-in-out 2}
:is(#kof,#kof-thanks) .thanks.go .th-logo{animation:kof-logoglitch 1.1s steps(1) .15s both}
:is(#kof,#kof-thanks) .thanks.go .th-ref{animation:kof-rise .5s .6s both}
:is(#kof,#kof-thanks) .thanks.go .th-sub{animation:kof-rise .5s 1s both}
:is(#kof,#kof-thanks) .thanks.go .th-msg,:is(#kof,#kof-thanks) .thanks.go .th-actions{animation:kof-rise .5s 1.2s both}
:is(#kof,#kof-thanks) .th-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
:is(#kof,#kof-thanks) .th-mail{font:700 14px var(--body);text-transform:uppercase;letter-spacing:.1em;padding:9px 14px;border-radius:4px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;user-select:all}
:is(#kof,#kof-thanks) .th-mail:hover{animation:kof-btnglitch .4s steps(2) infinite}
:is(#kof,#kof-thanks) .th-mail:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@keyframes kof-flick{0%{opacity:0}15%{opacity:1}25%{opacity:.2}35%{opacity:1}55%{opacity:.5}70%,100%{opacity:1}}
@keyframes kof-sweep{0%{top:-20vh}100%{top:110vh}}
@keyframes kof-logoglitch{0%{opacity:0;transform:scale(1.15)}10%{opacity:1;filter:drop-shadow(-6px 0 var(--pink)) drop-shadow(6px 0 var(--cyan));transform:translateX(-6px) skewX(-8deg)}25%{transform:translateX(5px);filter:drop-shadow(5px 0 var(--pink)) drop-shadow(-5px 0 var(--cyan))}40%{transform:translateX(-2px) skewX(4deg);clip-path:inset(20% 0 30% 0)}55%{transform:none;clip-path:inset(0 0 0 0);filter:drop-shadow(-2px 0 var(--pink)) drop-shadow(2px 0 var(--cyan))}70%,100%{transform:none;filter:none;opacity:1}}
@keyframes kof-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:is(#kof,#kof-thanks) .thanks.go,:is(#kof,#kof-thanks) .thanks.go *{animation:none!important}
:is(#kof,#kof-thanks) .th-scan{display:none}}
:is(#kof,#kof-thanks) .empty{color:var(--muted);font-size:14px;padding:12px;border:1px dashed var(--line);border-radius:4px}
:is(#kof,#kof-thanks) .hint{font-size:13px;color:var(--muted);margin:6px 0 0}
:is(#kof,#kof-thanks) .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
:is(#kof,#kof-thanks) fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
:is(#kof,#kof-thanks) legend{font-size:13px;font-weight:700;margin-bottom:6px;padding:0;text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
:is(#kof,#kof-thanks) .opt{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:var(--field);cursor:pointer;font-size:15px;color:var(--text)}
:is(#kof,#kof-thanks) .opt:has(input:checked){border-color:var(--ink);color:var(--ink)}
:is(#kof,#kof-thanks) .opt input{accent-color:#ffffff;width:18px;height:18px;flex:none}
:is(#kof,#kof-thanks) .opt .p{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
:is(#kof,#kof-thanks) fieldset.bad .opt{border-color:var(--error)}
:is(#kof,#kof-thanks) .qtyline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;color:var(--ink)}
:is(#kof,#kof-thanks) .qtyline input{width:90px;font:500 16px var(--mono);padding:7px 9px;border:1px solid var(--line);border-radius:4px;background:var(--field);color:var(--ink)}
:is(#kof,#kof-thanks) .nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:12px}
:is(#kof,#kof-thanks) .num{display:flex;flex-direction:column;gap:3px}
:is(#kof,#kof-thanks) .num span{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
:is(#kof,#kof-thanks) .num input{font-family:var(--mono)}
:is(#kof,#kof-thanks) .decl .opt{align-items:flex-start;font-size:15px;padding:12px 14px}
:is(#kof,#kof-thanks) .decl .opt input{margin-top:2px}
:is(#kof,#kof-thanks) .decl{display:flex;flex-direction:column;gap:10px;margin-top:14px}
:is(#kof,#kof-thanks) .decl .opt.bad{border-color:var(--error)}
:is(#kof,#kof-thanks) .errors{border:1px solid var(--error);border-radius:4px;padding:12px 14px;color:var(--text);font-size:15px}
:is(#kof,#kof-thanks) .errors strong{color:var(--error);font-family:var(--display);font-weight:400;font-size:20px;text-transform:uppercase}
:is(#kof,#kof-thanks) .errors ul{margin:6px 0 0;padding-left:18px}
:is(#kof,#kof-thanks) .done{border:1px solid var(--ok);border-radius:4px;padding:12px 14px;font-size:15px}
:is(#kof,#kof-thanks) .done strong{color:var(--ok);font-family:var(--display);font-weight:400;font-size:20px;text-transform:uppercase}
:is(#kof,#kof-thanks) button{font:700 14px var(--body);text-transform:uppercase;letter-spacing:.1em;padding:9px 14px;border-radius:4px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer}
:is(#kof,#kof-thanks) button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);font-size:12px;padding:6px 11px}
:is(#kof,#kof-thanks) button.ghost:hover{color:var(--ink);border-color:var(--ink)}
:is(#kof,#kof-thanks) button.big{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:0;padding:12px 18px;width:100%;transition:box-shadow .1s}
:is(#kof,#kof-thanks) button.big:hover{animation:kof-btnglitch .4s steps(2) infinite}
@keyframes kof-btnglitch{0%{box-shadow:-4px 0 var(--pink),4px 0 var(--cyan)}50%{box-shadow:4px 0 var(--pink),-4px 0 var(--cyan)}100%{box-shadow:-2px 0 var(--pink),2px 0 var(--cyan)}}
:is(#kof,#kof-thanks) aside{position:sticky;top:var(--kof-sticky-top,110px);min-width:0}
:is(#kof,#kof-thanks) .summary dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;margin:0;font-size:15px;font-variant-numeric:tabular-nums}
:is(#kof,#kof-thanks) .summary dt{color:var(--muted)}
:is(#kof,#kof-thanks) .summary dd{margin:0;text-align:right;font-family:var(--mono);font-size:13px;color:var(--text)}
:is(#kof,#kof-thanks) .summary dt.ph{color:var(--ink);font-weight:700;margin-top:8px;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
:is(#kof,#kof-thanks) .summary dd.ph{margin-top:8px}
:is(#kof,#kof-thanks) .nudge{grid-column:1/-1;font-size:13px;color:var(--cyan);margin-top:-2px}
:is(#kof,#kof-thanks) .total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);margin-top:12px;padding-top:10px;color:var(--ink);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:14px}
:is(#kof,#kof-thanks) .total strong{font-family:var(--display);font-weight:400;font-size:42px;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
:is(#kof,#kof-thanks) .tbc{font-size:13px;color:var(--muted);margin:8px 0 0}
:is(#kof,#kof-thanks) .bottom{margin-top:24px}
:is(#kof,#kof-thanks) .out-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:14px}
:is(#kof,#kof-thanks) .out{border:1px solid var(--line);border-radius:4px;background:var(--field);display:flex;flex-direction:column;min-width:0}
:is(#kof,#kof-thanks) .out-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
:is(#kof,#kof-thanks) .out-h b{font-family:var(--display);font-weight:400;font-size:18px;text-transform:uppercase;color:var(--ink)}
:is(#kof,#kof-thanks) .out pre{margin:0;padding:10px;font:12.5px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;color:var(--text)}
:is(#kof,#kof-thanks) .copied{font-size:12px;color:var(--ok)}
@media (prefers-reduced-motion:reduce){:is(#kof,#kof-thanks) .glitch.live,:is(#kof,#kof-thanks) .glitch.live::before,:is(#kof,#kof-thanks) .glitch.live::after,:is(#kof,#kof-thanks) .glitch.kof-flash::before,:is(#kof,#kof-thanks) .glitch.kof-flash::after,:is(#kof,#kof-thanks) .count.kof-bump,:is(#kof,#kof-thanks) button.big:hover,:is(#kof,#kof-thanks) details.product>summary:hover h2::before,:is(#kof,#kof-thanks) details.product>summary:hover h2::after{animation:none!important}
:is(#kof,#kof-thanks) .glitch::before,:is(#kof,#kof-thanks) .glitch::after{opacity:0!important}
:is(#kof,#kof-thanks) .chev{transition:none}}
#kof-thanks{padding:0!important;background:transparent!important;height:0;min-height:0}
#kof .kof-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
#kof .cf-turnstile{min-height:65px}

:is(#kof,#kof-thanks) [hidden]{display:none!important}

/* ---------- image glitch: add the CSS class "kof-glitch" to any image (or Divi Image module) ---------- */
.kof-gl-host{position:relative;overflow:hidden}
.kof-gl-layer{position:absolute;inset:0;pointer-events:none;opacity:0;background-size:100% 100%;background-repeat:no-repeat;z-index:2}
.kof-gl-a{filter:hue-rotate(-50deg) saturate(2.2) contrast(1.2);transform:translateX(-7px)}
.kof-gl-b{filter:hue-rotate(165deg) saturate(1.8) brightness(1.1);transform:translateX(7px)}
.kof-gl-host.is-glitching .kof-gl-a{opacity:1;animation:kof-gl-sliceA .7s steps(1) both}
.kof-gl-host.is-glitching .kof-gl-b{opacity:1;animation:kof-gl-sliceB .7s steps(1) both}
.kof-gl-host.is-glitching img{animation:kof-gl-jitter .7s steps(1) both}
@keyframes kof-gl-sliceA{0%{clip-path:inset(8% 0 70% 0);transform:translateX(-9px)}15%{clip-path:inset(40% 0 35% 0);transform:translateX(6px)}30%{clip-path:inset(75% 0 8% 0);transform:translateX(-4px)}45%{clip-path:inset(20% 0 62% 0);transform:translateX(10px)}60%{clip-path:inset(55% 0 25% 0);transform:translateX(-7px)}80%{clip-path:inset(0 0 88% 0);transform:translateX(3px)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes kof-gl-sliceB{0%{clip-path:inset(60% 0 22% 0);transform:translateX(8px)}20%{clip-path:inset(12% 0 75% 0);transform:translateX(-6px)}35%{clip-path:inset(85% 0 3% 0);transform:translateX(5px)}50%{clip-path:inset(30% 0 50% 0);transform:translateX(-10px)}70%{clip-path:inset(48% 0 40% 0);transform:translateX(7px)}85%{clip-path:inset(5% 0 80% 0);transform:translateX(-3px)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes kof-gl-jitter{0%,100%{transform:none}10%{transform:translateX(-3px) skewX(-3deg)}25%{transform:translateX(4px)}40%{transform:translateX(-2px) skewX(2deg)}55%{transform:translateX(2px)}70%{transform:none}}
@media (prefers-reduced-motion:reduce){.kof-gl-layer{display:none}.kof-gl-host.is-glitching img{animation:none}}

/* ---------- designs within a product ---------- */
#kof .designs{display:flex;flex-direction:column}
#kof .design{padding-block:6px 22px}
#kof .design+.design{border-top:2px dashed #3a3a3a;padding-top:22px}
#kof .design-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 10px}
#kof .dnum{font-family:var(--display);font-size:22px;text-transform:uppercase;color:var(--cyan);letter-spacing:0}
#kof .dname{max-width:420px}
#kof .dname input{font-size:17px;border-color:#4a4a4a}
#kof .dname input.bad,#kof input.bad{border-color:var(--error)}
#kof .pool{display:inline-block;align-self:flex-start;margin-top:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#000;background:var(--cyan);padding:2px 7px;border-radius:3px}
#kof .add-design{display:flex;align-items:center;gap:16px;width:100%;margin-top:6px;padding:14px 18px;background:transparent;color:var(--ink);border:2px dashed var(--ink);border-radius:6px;text-align:left;text-transform:none;letter-spacing:0;cursor:pointer;font:16px var(--body)}
#kof .add-design .plus{font-family:var(--display);font-size:54px;line-height:.8;width:54px;height:54px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#000;border-radius:4px}
#kof .add-design b{display:block;font-family:var(--display);font-weight:400;font-size:24px;text-transform:uppercase;line-height:1.1}
#kof .add-design small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
#kof .add-design:hover{border-color:var(--cyan);animation:kof-btnglitch .4s steps(2) infinite}
#kof .add-design:hover .plus{background:var(--cyan)}
#kof .add-design:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (max-width:640px){#kof .add-design .plus{font-size:40px;width:42px;height:42px}#kof .add-design b{font-size:20px}}
#kof .add-design .plus{position:relative;font-size:0!important}
#kof .add-design .plus::before,#kof .add-design .plus::after{content:"";position:absolute;left:50%;top:50%;background:#000;transform:translate(-50%,-50%)}
#kof .add-design .plus::before{width:62%;height:7px}
#kof .add-design .plus::after{width:7px;height:62%}

/* ---------- customer order review ---------- */
#kof #outs{margin-top:16px;display:flex;flex-direction:column;gap:18px}
#kof .rv-inv{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:start}
@media (max-width:760px){#kof .rv-inv{grid-template-columns:minmax(0,1fr)}}
#kof .rv-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--field)}
#kof .rv-table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;color:var(--text)}
#kof .rv-table th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
#kof .rv-table td{padding:8px 12px;border-bottom:1px solid #1f1f1f;vertical-align:top}
#kof .rv-table .n{text-align:right;white-space:nowrap}
#kof .rv-table tfoot td{border-top:2px solid var(--ink);border-bottom:0;color:var(--ink);font-family:var(--display);font-size:26px;text-transform:uppercase;padding-top:10px}
#kof .rv-table tfoot td:first-child{font-size:16px;font-family:var(--body);font-weight:700;letter-spacing:.12em;vertical-align:middle}
#kof .rv-deliv{border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:var(--field);color:var(--text);font-size:15px;line-height:1.5}
#kof .rv-k{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
#kof .rv-h{margin:6px 0 0}
#kof .rv-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
#kof .rv-card{border:1px solid var(--line);border-radius:4px;background:var(--field);min-width:0;overflow:hidden}
#kof .rv-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
#kof .rv-title b{font-family:var(--display);font-weight:400;font-size:19px;text-transform:uppercase;color:var(--ink);line-height:1.1}
#kof .rv-title span{font-size:13px;color:var(--muted);white-space:nowrap}
#kof .rv-meta{padding:8px 12px;font-size:13px;color:var(--cyan);border-bottom:1px solid var(--line)}
#kof .rv-list td:first-child{color:var(--ink);font-weight:700;white-space:nowrap}
#kof .rv-list td{color:var(--ink)}
#kof .rv-blank{color:var(--dim);font-style:italic}
#kof .rv-note{padding:10px 12px;font-size:14px;color:var(--text);border-top:1px solid var(--line);white-space:pre-wrap}
#kof .leadnote{margin:12px 0 0;padding:9px 12px;border-left:3px solid var(--cyan);background:var(--field);color:var(--ink);font-size:14px;border-radius:0 4px 4px 0}
#kof .rv-lead{grid-column:1/-1;margin:0}

/* ---------- contact page ---------- */
#kof.kof-contact .cwrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
#kof.kof-contact .top{margin-bottom:6px}
#kof .cfields{margin-top:0}
#kof .f-wide{grid-column:1/-1}
#kof .f textarea{font:16px/1.5 var(--body);padding:10px 11px;border:1px solid var(--line);border-radius:4px;background:var(--field);color:var(--ink);resize:vertical;width:100%}
#kof .f input.bad,#kof .f textarea.bad{border-color:var(--error)}
:is(#kof,#kof-thanks) .th-home{font:700 14px var(--body);text-transform:uppercase;letter-spacing:.1em;padding:11px 18px;border-radius:4px;background:var(--ink);color:#000;text-decoration:none}
:is(#kof,#kof-thanks) .th-home:hover{animation:kof-btnglitch .4s steps(2) infinite}
:is(#kof,#kof-thanks) .th-home:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- light contact form for white sections: [kof_contact theme="light"] ---------- */
#kof.kof-light{--bg:transparent;--surface:#ffffff;--raised:#ffffff;--ink:#000000;--text:#333333;--muted:#666666;--dim:#999999;--line:#d6d6d6;--field:#f5f5f5;--accent:#000000;--accent-ink:#ffffff;color-scheme:light;background:transparent}
#kof.kof-light .card{background:transparent;border:0;padding:0}
#kof.kof-light .f input,#kof.kof-light .f textarea{background:#fff;border:1px solid #cfcfcf}
#kof.kof-light .f input:focus,#kof.kof-light .f textarea:focus{border-color:#000}
#kof.kof-light .errors{background:#fff5f8}
#kof.kof-light .glitch::before,#kof.kof-light .glitch::after{color:#000}
#kof.kof-compact{padding:0}
#kof.kof-compact .cwrap{max-width:none}