/* Kode Garment — the DTF "Upload Files" panel (order.php?s=dtf). Fabrik's panel, in the site's own look: neutral
   black and greys, the Kode orange for the one action and the selected state, blue links. No purple, no browns.
   Phone first: the two columns stack under 900px and nothing scrolls sideways. */
.dp{--r:16px;--edge:#E4E4E7;--tile:#F1F1F3;margin-top:clamp(18px,2.4vw,30px);scroll-margin-top:90px}
.dp__head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.dp__h{margin:0;font-family:var(--d);font-weight:800;font-variation-settings:'wdth' 92,'wght' 800;font-size:clamp(20px,2vw,26px);letter-spacing:-.01em;color:var(--ink)}
.dp__sub{margin:0;font-size:14px;color:var(--mid)}
.dp__grid{display:grid;gap:clamp(14px,1.8vw,24px);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.dp__grid{grid-template-columns:1fr}}

/* ---------- left: drop zone and the designs ---------- */
.dp__left{display:grid;gap:14px;min-width:0}
.dp__drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:176px;padding:24px 18px;text-align:center;
  border:2px dashed var(--line-2);border-radius:var(--r);background:#FAFAFB;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.dp__drop:hover,.dp__drop:focus-within,.dp__drop.is-over{border-color:var(--kode);background:#FFF8F3;box-shadow:0 0 0 4px rgba(243,112,33,.12)}
.dp__drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dp__drop svg{width:34px;height:34px;color:var(--kode-ink)}
.dp__drop b{font-size:16px;font-weight:600}
.dp__drop span{font-size:12.5px;color:var(--mid)}
.dp__drop.is-busy{pointer-events:none;opacity:.7}
.dp__busy{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mid)}
.dp__busy[hidden],.dp__rej[hidden],.dp__warn[hidden],.dp__err[hidden],.dp__empty[hidden],.dp__items[hidden]{display:none}
.dp__busy::before{content:"";width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--kode);border-radius:50%;animation:dpspin .7s linear infinite}
@keyframes dpspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dp__busy::before{animation:none}}
.dp__rej{margin:0;padding:10px 12px;border:1px solid #F0B8B2;border-radius:10px;background:#FEF3F2;font-size:13px;color:#B42318}
.dp__empty{margin:0;padding:18px 4px;font-size:14.5px;color:var(--mid)}
.dp__items{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.dp__item{display:grid;grid-template-columns:56px minmax(0,1fr) auto 32px;align-items:center;gap:12px;padding:8px 10px 8px 8px;border:1.5px solid var(--edge);border-radius:14px;background:#fff;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s}
.dp__item:hover{border-color:var(--line-2)}
.dp__item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dp__item.is-sel{border-color:var(--kode);background:#FFF8F3;box-shadow:0 0 0 3px rgba(243,112,33,.14)}
.dp__thumb{display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid var(--edge);border-radius:10px;background:var(--tile) repeating-conic-gradient(#fff 0 25%,#ECECEF 0 50%) 50%/12px 12px;overflow:hidden;cursor:zoom-in}
.dp__thumb img{width:100%;height:100%;object-fit:contain}
.dp__thumb svg{width:24px;height:24px;color:var(--mid)}
.dp__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.dp__meta b{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp__dim,.dp__st{font-family:var(--m);font-size:12px;font-style:normal;color:var(--mid)}
.dp__st--bad{color:#B42318}
.dp__badge{margin-left:6px;padding:1px 7px;border:1px solid var(--line-2);border-radius:999px;font:500 10.5px var(--m);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--mid)}
.dp__retry{margin-left:6px;padding:0;border:0;background:none;font:inherit;color:#2F62C2;text-decoration:underline;cursor:pointer}
.dp__price{font-family:var(--m);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.dp__rm{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--mid);cursor:pointer}
.dp__rm:hover{background:var(--tile);color:var(--ink)}
.dp__rm svg{width:16px;height:16px}
@media (max-width:480px){.dp__item{grid-template-columns:48px minmax(0,1fr) 32px}.dp__price{grid-column:2;grid-row:2}.dp__thumb{width:48px;height:48px}}

/* order name + postal, tucked under the list */
.dp__job{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.dp__job summary{padding:14px 16px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.dp__job summary::-webkit-details-marker{display:none}
.dp__job summary::after{content:"+";float:right;font-family:var(--m);color:var(--kode-ink)}
.dp__job[open] summary::after{content:"–"}
.dp__jobg{display:grid;gap:10px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);padding:0 16px 8px}
@media (max-width:640px){.dp__jobg{grid-template-columns:1fr}}
.dp__job .od__hint,.dp__job .od__err{padding:0 16px 12px;margin:0}

/* ---------- right: Options + the price ---------- */
.dp__panel{min-width:0;padding:clamp(16px,1.8vw,24px);border:1px solid var(--line);border-radius:var(--r);background:#fff}
@media (min-width:901px) and (min-height:940px){.dp__panel{position:sticky;top:92px}}   /* only where the whole panel fits on screen */
.dp__pt{margin:0 0 6px;font-family:var(--m);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--kode-ink)}
.dp__tog{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--edge);font-size:14.5px;color:var(--ink);cursor:pointer}
.dp__tog small{font-family:var(--m);font-size:12px;color:var(--mid)}
.dp__tog input{position:absolute;opacity:0;pointer-events:none}
.dp__sw{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:#C8C8CD;transition:background .2s}
.dp__sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(17,17,19,.3);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.dp__tog input:checked+.dp__sw{background:var(--kode)}
.dp__tog input:checked+.dp__sw::after{transform:translateX(18px)}
.dp__tog input:focus-visible+.dp__sw{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.dp__sw,.dp__sw::after{transition:none}}
.dp__dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 4px}
.dp__dims label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mid)}
.dp__dims input{width:100%;height:46px;padding:0 10px;border:2px solid #6B6B75;border-radius:10px;background:#fff;box-shadow:inset 0 1px 2px rgba(17,17,19,.08);font:600 16px var(--m);color:var(--ink)}
.dp__dims input:focus{outline:2px solid var(--kode);outline-offset:1px;border-color:var(--kode)}
.dp__dims input::placeholder{color:#9A9AA2;font-weight:400}
.dp__hintm{margin:6px 0 0;font-size:12.5px;color:var(--mid)}
.dp__sum{margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--line-2);display:grid;gap:7px}
.dp__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--mid)}
.dp__row b{font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);text-align:right}
.dp__tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.dp__tot span{font-size:15px;font-weight:700;color:var(--ink)}
.dp__tot b{font-family:var(--m);font-size:26px;font-weight:600;color:var(--ink)}
.dp__warn{margin:10px 0 0;padding:10px 12px;border:1px solid #F0B8B2;border-radius:10px;background:#FEF3F2;font-size:13px;line-height:1.45;color:#B42318}
.dp__fine{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--mid)}
.dp__btns{display:grid;gap:10px;margin:16px 0 0}
.dp__btns .btn{width:100%;justify-content:center;min-height:50px}
.dp__add{background:var(--kode);color:#fff}
.dp__add:hover:not(:disabled){background:var(--ink);color:#fff}
.dp__add:disabled{opacity:.45;cursor:not-allowed}
.dp__chk{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink);cursor:pointer}
.dp__chk input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--kode)}
.dp__err{margin:6px 0 0;font-size:13px;color:#B42318}
.dp__msgs{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:13px;color:#B42318}
.dp__msgs:empty{display:none}

/* ---------- File Library window and the preview ---------- */
html.dp-lock{overflow:hidden}
.dp__lib{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;background:rgba(17,17,19,.6)}
.dp__lib[hidden],.dp__pv[hidden]{display:none}
.dp__libin{display:flex;flex-direction:column;width:min(860px,100%);max-height:min(86vh,720px);border-radius:var(--r);background:#fff;box-shadow:0 24px 64px rgba(17,17,19,.35);overflow:hidden}
.dp__libh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.dp__libh b{font-family:var(--d);font-weight:800;font-size:18px;color:var(--ink)}
.dp__libx{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:10px;background:var(--ink);color:#fff;cursor:pointer}
.dp__libx svg{width:18px;height:18px}
.dp__libbody{flex:1;overflow:auto;padding:16px 18px}
.dp__libmsg{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:var(--mid)}
.dp__libmsg--s{margin:12px 0 0;font-size:13px}
.dp__libg{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:0;padding:0;list-style:none}
.dp__libi{display:flex;flex-direction:column;gap:5px;padding:8px;border:1.5px solid var(--edge);border-radius:12px;background:#fff}
.dp__libi.is-in{border-color:var(--kode);background:#FFF8F3}
.dp__libt{display:grid;place-items:center;aspect-ratio:1;border-radius:8px;background:var(--tile) repeating-conic-gradient(#fff 0 25%,#ECECEF 0 50%) 50%/12px 12px;overflow:hidden}
.dp__libt img{width:100%;height:100%;object-fit:contain}
.dp__libn{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp__libd{font-family:var(--m);font-size:11px;color:var(--mid);min-height:1.2em}
.dp__libuse{min-height:38px;padding:6px 10px;font-size:13px}
.dp__libpager{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line);font-family:var(--m);font-size:12px;color:var(--mid)}
.dp__libpager:empty{display:none}
.dp__libpager .btn{min-height:38px;padding:6px 14px;font-size:13px}
.dp__pv{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:20px;background:rgba(17,17,19,.78);cursor:zoom-out}
.dp__pv img{max-width:92vw;max-height:88vh;border-radius:10px;background:repeating-conic-gradient(#fff 0 25%,#ECECEF 0 50%) 50%/16px 16px}
.dp__pvx{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.dp__pvx svg{width:18px;height:18px}

/* ---------- the photo gallery beside the card ---------- */
.od__prod--panel{grid-template-columns:1fr}
.od__prod--panel .od__pimg{display:none}
.dpx{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;margin-top:clamp(18px,2.4vw,30px)}
@media (max-width:1100px){.dpx{grid-template-columns:1fr}}
.dpx .dp{margin-top:0;padding:clamp(14px,1.6vw,22px);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.dpg{min-width:0;display:grid;gap:10px}
.dpg__main{margin:0;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--tile)}
.dpg__zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.dpg__main img{display:block;width:100%;height:100%;object-fit:cover}
.dpg__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.dpg__t{display:block;width:100%;aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--tile);cursor:pointer;opacity:.82;transition:opacity .15s,border-color .15s}
.dpg__t:hover{opacity:1}
.dpg__t.is-on{border-color:var(--kode);opacity:1}
.dpg__t:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dpg__t img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:1101px){.dpg{position:sticky;top:92px}}

/* panel page: heading, then the photos and the Upload Files card, then the prices */
.od--pn .wrap{display:flex;flex-direction:column}
.od--pn .wrap>.dpx{order:1}
.od--pn .wrap>.od__prod{order:2;margin-top:clamp(24px,3vw,44px)}
.od--pn .wrap>.od__how{order:3}
@media (max-width:1100px){.dpg__main{aspect-ratio:auto;width:100%;height:clamp(260px,56vw,460px)}.dpg__thumbs{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:560px){.dpg__main{aspect-ratio:1;height:auto}.dpg__thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}}