/* Kode Garment — the redesigned screen-printed transfers page (order.php?s=screen&v=2), owner 2026-10-03: polished and professional,
   then "too busy: simple and clean, yet creative". So: one headline, one white card, one light summary, lots of air.
   Neutral greys and the Kode orange for the one action and the active state. No purple, no browns, no monospace (Arial for figures). */
.od--v2 .od__eye,.od--v2 .od__h--wiz{display:none}
.od--v2.od{padding-top:clamp(18px,2.4vw,34px)}
.sv2{--sv2-o:#EE6A1A;--r:20px;display:grid;gap:clamp(28px,4vw,48px);color:var(--ink)}

/* ---------- headline ---------- */
.sv2-head{max-width:760px}
.sv2-eye{margin:0;font:700 12px var(--b);letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.sv2-h{margin:.35em 0 0;font-family:var(--d);font-weight:800;font-variation-settings:'wdth' 84,'wght' 820;font-size:clamp(38px,6vw,72px);line-height:.96;letter-spacing:-.022em;text-transform:uppercase}
.sv2-h em{font-style:normal;color:var(--sv2-o)}
.sv2-lede{margin:1em 0 0;max-width:50ch;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--mid)}

/* ---------- form + aside ---------- */
.sv2-form{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(20px,3vw,44px);align-items:start}
@media (max-width:960px){.sv2-form{grid-template-columns:1fr}}
.sv2-card{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.sv2-step{padding:clamp(22px,2.6vw,34px)}
.sv2-step+.sv2-step{border-top:1px solid var(--line)}
.sv2-step h2{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--d);font-weight:800;font-size:clamp(18px,1.6vw,21px);line-height:1.2}
.sv2-step h2 b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);font:800 13px Arial,Helvetica,sans-serif;color:#fff}
.sv2-step .uo__f label{font-size:14.5px}
.sv2-step .uo__f input[type=text],.sv2-step .uo__f input[type=number]{max-width:380px}
.sv2-hint{margin:12px 0 0;font-size:13px;color:var(--mid)}
.sv2-range{display:block;width:100%;max-width:380px;margin-top:22px;accent-color:var(--kode)}

/* the price steps: a slim row of chips */
.sv2-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:380px;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.sv2-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.sv2-chip small{font:600 12px Arial,Helvetica,sans-serif;color:var(--mid)}
.sv2-chip b{font:700 15px Arial,Helvetica,sans-serif;color:var(--ink)}
.sv2-chip:hover{border-color:var(--line-2);background:#FAFAFB}
.sv2-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sv2-chip.is-on{border-color:var(--kode);background:#FFF8F3;box-shadow:0 0 0 3px rgba(243,112,33,.14)}
.sv2-chip.is-on small{color:var(--kode-ink)}
@media (prefers-reduced-motion:reduce){.sv2-chip{transition:none}}
.sv2-job{margin:0;border:0;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
.sv2-job summary{padding:16px clamp(22px,2.6vw,34px)}

/* ---------- the aside: photo, the stack of sheets, the total ---------- */
.sv2-aside{position:sticky;top:92px;display:grid;gap:16px}
@media (max-width:960px){.sv2-aside{position:static}}
.sv2-vis{position:relative}
.sv2-vis>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--tile,#F1F1F3)}

.sv2-sum{padding:clamp(20px,2.2vw,26px);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.sv2-sum__l{margin:0}
.sv2-sum__l>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.sv2-sum__l dt{color:var(--mid)}
.sv2-sum__l dd{margin:0;font-family:Arial,Helvetica,sans-serif;font-weight:600;text-align:right;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv2-sum__t{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}
.sv2-sum__t span{font-size:15px;font-weight:700}
.sv2-sum__t b{font-family:Arial,Helvetica,sans-serif;font-size:clamp(30px,3vw,38px)}
.sv2-sum__f{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--mid)}
.sv2-sum__chk{margin-top:16px}
.sv2-add{width:100%;min-height:54px;margin-top:16px;border-radius:12px;justify-content:center;background:var(--kode);color:#fff;font-size:15px}
.sv2-add:hover:not(:disabled){background:var(--ink);color:#fff}
.sv2-add:disabled{background:#E9E9EC;color:#8A8A93;cursor:not-allowed;box-shadow:none;opacity:1}
.sv2-facts{margin:0;font-size:13px;text-align:center;color:var(--mid)}

/* ---------- good to know ---------- */
.sv2-more{max-width:760px;border-top:1px solid var(--line);padding-top:6px}
.sv2-more summary{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-weight:700;font-size:16px;cursor:pointer;list-style:none}
.sv2-more summary::-webkit-details-marker{display:none}
.sv2-more summary::after{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#EDEDF0;font:700 16px Arial,Helvetica,sans-serif}
.sv2-more[open] summary::after{content:"–";background:var(--kode);color:#fff}
.sv2-more dl{margin:0 0 10px}
.sv2-more dl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--line)}
@media (max-width:520px){.sv2-more dl>div{grid-template-columns:1fr;gap:2px}}
.sv2-more dt{font-weight:600;font-size:14.5px}
.sv2-more dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--mid)}
.sv2-more a{color:#2F62C2}

/* the photos (the GARDE shirt and the GARDE sheet): a square frame and a small row of thumbnails */
.sv2-vis.dpg{position:static;gap:10px}
.sv2-vis .dpg__main{border-radius:var(--r);aspect-ratio:1}
.sv2-vis .dpg__thumbs{grid-template-columns:repeat(4,minmax(0,1fr));max-width:100%}
.sv2-vis .dpg__t{border-radius:12px}