/* Kode Garment — the Custom Patches page (order.php?s=patch): the few parts the screen page does not have. Calm greys, the Kode orange only on the active choice. */
.pt2-dims{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:380px}
.pt2-dims .uo__f input[type=number]{max-width:none}
.pt2-shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:620px){.pt2-shapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pt2-shape{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.pt2-shape input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pt2-shape b{font:700 14px Arial,Helvetica,sans-serif}
.pt2-shape small{font:600 12px Arial,Helvetica,sans-serif;color:var(--mid)}
.pt2-shape:hover{border-color:var(--line-2);background:#FAFAFB}
.pt2-shape:has(input:checked){border-color:var(--kode);background:#FFF8F3;box-shadow:0 0 0 3px rgba(243,112,33,.14)}
.pt2-shape:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.pt2-shp{display:block;width:54px;height:54px;border:3px solid var(--ink);background:#fff}
.pt2-shp--circle{border-radius:50%}
.pt2-shp--square{width:64px;height:46px;margin:4px 0;border-radius:8px}
.pt2-shp--shield{border-radius:8px 8px 50% 50%/8px 8px 62% 62%}
.pt2-shp--custom{border-style:dashed;border-radius:42% 58% 46% 54%/56% 42% 58% 44%}
.pt2-rep{display:grid;gap:10px}
.pt2-opt{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.pt2-opt input{margin:3px 0 0;accent-color:var(--kode);flex:none}
.pt2-opt span{display:grid;gap:2px}
.pt2-opt b{font:700 15px Arial,Helvetica,sans-serif}
.pt2-opt small{font-size:13px;color:var(--mid)}
.pt2-opt:has(input:checked){border-color:var(--kode);background:#FFF8F3}
.pt2-opt:has(input:disabled){cursor:not-allowed}
.pt2-opt:has(input:disabled) b{color:var(--mid)}
@media (prefers-reduced-motion:reduce){.pt2-shape,.pt2-opt{transition:none}}

/* the headline stays on one row, at every width */
.pt2 .sv2-head{max-width:none}
.pt2 .sv2-h{white-space:nowrap;font-size:clamp(25px,7.6vw,72px)}
/* the paragraph runs the full length of the headline above it */
.pt2 .sv2-head{width:fit-content;max-width:100%}
.pt2 .sv2-lede{width:0;min-width:100%;max-width:none}