/* Hallmark · page: custom orders · macrostructure: workbench split (live try-on left, controls right), then stacked service bands of unequal height */
.custom-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3.4vw,64px);align-items:center;padding-top:var(--space-md)}
.custom-panel{padding:var(--space-xl) 0}
.wrap-scene{aspect-ratio:1;margin:0}
.wrap-scene .scene__still{width:100%;height:100%;object-fit:cover}
.wrap-scene canvas{position:absolute;inset:0;width:100%;height:100%}
.wrap-controls{position:absolute;left:var(--space-sm);right:var(--space-sm);bottom:var(--space-sm);z-index:3;display:grid;gap:8px}
.chip[aria-pressed]{cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.chip[aria-pressed]:hover{border-color:var(--text);color:var(--text)}
.chip[aria-pressed=true]{background:var(--yel);border-color:var(--yel);color:var(--accent-ink)}
.chip[aria-pressed]:active{transform:translateY(1px)}
.chip[aria-pressed]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.services{padding:var(--space-3xl) 0;display:grid;gap:2px}
.svc{border-top:4px solid var(--c);background:var(--ground-2);border-radius:0 0 var(--radius-md) var(--radius-md);padding:var(--space-md) var(--space-lg)}
.svc summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-md);cursor:pointer;list-style:none}
.svc summary::-webkit-details-marker{display:none}
.svc summary .mono{font-size:11px;color:var(--text-3);white-space:nowrap}
.svc[open]{padding-bottom:var(--space-xl)}
@media (max-width:900px){.custom-hero{grid-template-columns:minmax(0,1fr)}.svc summary{flex-direction:column;gap:6px}}
/* v2: garment + colour, file | typed idea, the pressing overlay */
.pick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);margin:var(--space-md) 0}
.swatches{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0}
.swatch{position:relative;width:36px;height:36px;border-radius:50%;background:var(--s);border:2px solid var(--line);cursor:pointer}
.swatch input{position:absolute;opacity:0;width:0;height:0}
.swatch:has(input:checked){box-shadow:0 0 0 3px var(--ground),0 0 0 5px var(--yel)}
.swatch:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:4px}
.modes{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:var(--space-md) 0 var(--space-sm)}
.mode{height:44px;padding:0 var(--space-sm);border:0;border-bottom:3px solid transparent;background:none;color:var(--text-2);font:650 14px/1 var(--font-body);cursor:pointer}
.mode[aria-selected=true]{color:var(--text);border-bottom-color:var(--yel)}
.mode:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.idea-form .choice{margin:var(--space-xs) 0;border:0;padding:0}
.idea-form .btns{margin-top:var(--space-sm)}
.fine{font-size:var(--text-xs);color:var(--text-3);margin:var(--space-xs) 0 0;max-width:52ch}
.after-press{margin-top:var(--space-md)}
.pressing{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity var(--dur-base);background:color-mix(in oklch,var(--ground-3) 45%,transparent)}
.pressing__head{position:absolute;left:12%;right:12%;top:0;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--mag),var(--blu),var(--grn),var(--yel));box-shadow:0 0 24px var(--blu)}
#tryon[data-pressing] .pressing{opacity:1}
#tryon[data-pressing] .pressing__head{animation:scan 1.6s var(--ease-press) infinite alternate}
@keyframes scan{from{top:18%}to{top:72%}}
@media (prefers-reduced-motion:reduce){#tryon[data-pressing] .pressing__head{animation:none;top:45%}}