/* Vest Quote and Logo Visualiser
   Everything is namespaced under .vq so it cannot leak into your theme,
   and nothing here styles a bare element selector. */

.vq{
  --vq-scrim:#E8EAE5; --vq-panel:#F1F3EF; --vq-ink:#111311;
  --vq-ink60:rgba(17,19,17,.6); --vq-ink40:rgba(17,19,17,.4);
  --vq-tape:#A9B1AE; --vq-signal:#DAF20B; --vq-orange:#F25C05; --vq-vest:#E4F00A;
  --vq-ease:cubic-bezier(.2,0,0,1);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  color:var(--vq-ink); line-height:1.5; box-sizing:border-box;
}
.vq *,.vq *::before,.vq *::after{box-sizing:inherit}
.vq .vq-val,.vq .vq-lbl,.vq .vq-qty,.vq .vq-scale,.vq .vq-incvat,
.vq .vq-repeat,.vq .vq-msg,.vq .vq-areatag,.vq .vq-stocknote,
.vq .vq-head,.vq .vq-speedlbl,.vq .vq-ctrl h3,.vq .vq-slab,.vq .vq-link,
.vq .vq-drop p,.vq .vq-speeds .sp,.vq .vq-vests .mult{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;
}
.vq .vq-qty,.vq .vq-total .vq-val,.vq .vq-seg button,
.vq .vq-speeds .sl,.vq .vq-drop strong{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
}
.vq-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vq-mt{margin-top:20px}

/* panel */
.vq-panel{border:2px solid var(--vq-ink);background:var(--vq-panel);padding:22px}
.vq-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:12px;border-bottom:2px solid var(--vq-tape)}
.vq-note{color:var(--vq-ink40);letter-spacing:.05em}

.vq-seg{display:flex;border:2px solid var(--vq-ink);margin-top:14px}
.vq-seg button{flex:1;font-size:15px;letter-spacing:.04em;padding:10px 5px;background:transparent;
  color:var(--vq-ink);border:0;cursor:pointer;font-weight:700;
  transition:background 120ms var(--vq-ease),color 120ms var(--vq-ease)}
.vq-seg button + button{border-left:2px solid var(--vq-ink)}
.vq-seg button[aria-pressed=true]{background:var(--vq-ink);color:var(--vq-scrim)}
.vq-seg button:focus-visible{outline:3px solid var(--vq-orange);outline-offset:2px}
.vq-swatch button[aria-pressed=true][data-c=yellow]{background:#E4F00A;color:var(--vq-ink)}
.vq-swatch button[aria-pressed=true][data-c=orange]{background:var(--vq-orange);color:#fff}

.vq-qty{font-size:clamp(52px,7vw,88px);line-height:.85;margin-top:16px}
.vq-qty small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--vq-ink60);margin-top:8px}

.vq input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;
  background:transparent;margin:12px 0 2px;cursor:grab;display:block}
.vq input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--vq-tape)}
.vq input[type=range]::-moz-range-track{height:6px;background:var(--vq-tape)}
.vq input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:34px;
  margin-top:-14px;background:var(--vq-signal);border:2px solid var(--vq-ink);border-radius:2px}
.vq input[type=range]::-moz-range-thumb{width:26px;height:34px;background:var(--vq-signal);
  border:2px solid var(--vq-ink);border-radius:2px}
.vq input[type=range]:focus-visible{outline:3px solid var(--vq-orange);outline-offset:4px}
.vq-scale{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;color:var(--vq-ink40)}

.vq-vests{display:flex;align-items:center;gap:5px;margin:16px 0 2px;min-height:28px;flex-wrap:wrap}
.vq-vests svg{width:18px;height:25px;flex:0 0 auto}
.vq-vests .mult{font-size:11.5px;font-weight:600;color:var(--vq-ink60);margin-left:5px}

.vq-speedlbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--vq-ink60);
  margin:16px 0 8px;font-weight:600}
.vq-speeds{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--vq-ink);border:2px solid var(--vq-ink)}
.vq-speeds:empty,.vq-speeds:has(.vq-stocknote){display:block;background:none;border:0}
.vq-speeds button{background:var(--vq-panel);border:0;cursor:pointer;padding:11px 10px;text-align:left;
  transition:background 120ms var(--vq-ease)}
.vq-speeds .sl{display:block;font-size:17px;line-height:1.05;font-weight:700}
.vq-speeds .sp{display:block;font-size:11.5px;color:var(--vq-ink60);margin-top:3px;letter-spacing:.04em}
.vq-speeds button[aria-pressed=true]{background:var(--vq-signal)}
.vq-speeds button[aria-pressed=true] .sp{color:var(--vq-ink)}
.vq-speeds button:focus-visible{outline:3px solid var(--vq-orange);outline-offset:-3px}
.vq-stocknote{font-size:11.5px;line-height:1.65;letter-spacing:.02em;color:var(--vq-ink60);
  border-left:3px solid var(--vq-orange);background:rgba(242,92,5,.09);padding:11px 12px;margin:0}
.vq-stocknote strong{color:var(--vq-ink)}

.vq-readout{border-top:2px solid var(--vq-tape);margin-top:14px;padding-top:12px}
.vq-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13px}
.vq-row[hidden]{display:none}
.vq-lbl{text-transform:uppercase;color:var(--vq-ink60);font-size:11.5px;letter-spacing:.07em}
.vq-lbl em{text-transform:none;letter-spacing:0;font-style:normal}
.vq-val{font-weight:600;font-size:15px}
.vq-val.ok{background:var(--vq-signal);padding:0 6px}
.vq-val.warn{background:var(--vq-orange);color:#fff;padding:0 6px}
.vq-total{align-items:center;border-top:2px solid var(--vq-tape);margin-top:9px;padding-top:12px}
.vq-total .vq-val{font-size:38px;line-height:1;background:var(--vq-signal);padding:0 8px;margin-right:-8px}
.vq-incvat{font-size:12px;color:var(--vq-ink60);text-align:right;margin:6px 0 0;letter-spacing:.04em}
.vq-repeat{font-size:11.5px;line-height:1.6;color:var(--vq-ink60);margin:12px 0 0;padding-top:11px;
  border-top:1px dashed var(--vq-tape);letter-spacing:.02em}
.vq-repeat b{color:var(--vq-ink)}
.vq-msg{font-size:11px;line-height:1.6;padding:10px 11px;margin-top:12px;
  border-left:3px solid var(--vq-tape);background:rgba(169,177,174,.16);color:var(--vq-ink60)}
.vq-msg.vq-alert,.vq-alert{border-left-color:var(--vq-orange);background:rgba(242,92,5,.1);color:var(--vq-ink)}
.vq-msg strong{color:var(--vq-ink)}

/* visualiser */
.vq-vis{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:minmax(0,1fr) minmax(280px,350px);align-items:start}
@media(max-width:880px){.vq-vis{grid-template-columns:1fr}}
.vq-stageshell{border:2px solid var(--vq-ink);background:var(--vq-panel);padding:16px;position:relative}
.vq-stage{position:relative;width:100%;aspect-ratio:400/480;max-width:420px;margin:0 auto;touch-action:none}
.vq-stage svg{width:100%;height:100%;display:block}
.vq-area{position:absolute;border:2px dashed var(--vq-tape);
  transition:border-color 180ms var(--vq-ease),background 180ms var(--vq-ease)}
.vq-area.hot{border-color:var(--vq-ink)}
.vq-area.reject{border-color:var(--vq-orange);background:rgba(242,92,5,.12)}
.vq-areatag{position:absolute;top:-11px;left:-2px;background:var(--vq-panel);padding:0 6px;font-size:10px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--vq-ink60);white-space:nowrap}
.vq-logo{position:absolute;top:0;left:0;cursor:grab;user-select:none}
.vq-logo.dragging{cursor:grabbing}
.vq-logo img{width:100%;height:100%;display:block;pointer-events:none;max-width:none}
.vq-logo::after{content:'';position:absolute;inset:-4px;border:1px solid var(--vq-ink);opacity:0;
  transition:opacity 180ms var(--vq-ease)}
.vq-logo:hover::after,.vq-logo.dragging::after{opacity:.45}
.vq-drop{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:rgba(232,234,229,.93);border:2px dashed var(--vq-ink);padding:20px;cursor:pointer;
  transition:background 180ms var(--vq-ease)}
.vq-drop.over{background:var(--vq-signal)}
.vq-drop.hidden{display:none}
.vq-drop strong{font-size:24px;display:block;line-height:1}
.vq-drop p{font-size:11px;letter-spacing:.05em;color:var(--vq-ink60);margin:9px auto 0;max-width:28ch}
.vq-ctrl{border:2px solid var(--vq-ink);background:var(--vq-panel);padding:18px}
.vq-ctrl + .vq-ctrl{margin-top:13px}
.vq-ctrl h3{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:11px;border-bottom:2px solid var(--vq-tape);margin:0 0 13px}
.vq-slab{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vq-ink60);margin-top:14px}
.vq-link{display:block;width:100%;margin-top:8px;background:none;border:0;cursor:pointer;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--vq-ink60);padding:5px}
.vq-link:hover{color:var(--vq-ink)}

@media(prefers-reduced-motion:reduce){
  .vq *,.vq *::before,.vq *::after{transition:none!important;animation:none!important}
}

/* price grid */
.vq-gridwrap{width:100%}
.vq-table{width:100%;border-collapse:collapse;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-variant-numeric:tabular-nums}
.vq-table th,.vq-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--vq-tape)}
.vq-table th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vq-ink60);border-bottom:2px solid var(--vq-ink)}
.vq-table td:not(:first-child),.vq-table th:not(:first-child){text-align:right}
.vq-table tr.live td{background:var(--vq-signal)}
.vq-caption{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;
  color:var(--vq-ink60);margin:14px 0 0;letter-spacing:.03em}
@media(max-width:640px){
  .vq-table{font-size:12px}
  .vq-table th,.vq-table td{padding:9px 5px}
}

/* photograph-backed vest preview */
.vq-photo{width:100%;height:100%;object-fit:contain;display:block;position:absolute;inset:0}
.vq-photo[hidden]{display:none}
.vq-stage.has-photo .vq-logo img{mix-blend-mode:multiply}
.vq-stage.has-photo .vq-area{border-color:rgba(17,19,17,.45)}
.vq-cal{display:block;margin-top:14px;background:var(--vq-ink);
  color:var(--vq-signal);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  line-height:1.6;padding:10px 12px;word-break:break-word;user-select:all;cursor:text}
.vq-cal[hidden]{display:none}

/* explicit file button, so choosing a logo never depends on JavaScript */
.vq-choose{
  display:inline-block;margin-top:14px;cursor:pointer;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.05em;padding:11px 22px;
  background:var(--vq-signal);color:var(--vq-ink);border:2px solid var(--vq-ink);border-radius:2px;
  transition:background 120ms var(--vq-ease),color 120ms var(--vq-ease);
}
.vq-choose:hover{background:var(--vq-ink);color:var(--vq-signal)}
.vq-hidden:focus-visible + *,.vq-choose:focus-within{outline:3px solid var(--vq-orange);outline-offset:3px}

/* more than two positions needs to wrap on a phone */
.vq-seg.vq-wrap{flex-wrap:wrap}
.vq-seg.vq-wrap button{flex:1 1 33%;min-width:90px}
.vq-seg.vq-wrap button + button{border-left:2px solid var(--vq-ink)}
@media(max-width:420px){
  .vq-seg.vq-wrap button{flex:1 1 50%}
}


/* calibration mode: make the box unmissable against a photo */
.vq-stage[tabindex] .vq-area{border:2px dashed var(--vq-orange);background:rgba(242,92,5,.14)}
.vq-stage[tabindex]:focus-visible{outline:3px solid var(--vq-orange);outline-offset:3px}

/* stop the control headings crowding the buttons above them */
.vq-ctrl h3.vq-mt{margin-top:22px}
.vq-seg.vq-wrap{margin-bottom:2px}

/* colour swatch buttons, including two tone executive options */
.vq-swatch button{display:flex;align-items:center;gap:8px;font-size:13px;
  letter-spacing:.02em;padding:9px 10px;text-align:left;line-height:1.15}
.vq-swatch button .dot{width:16px;height:16px;flex:0 0 auto;
  border:1.5px solid var(--vq-ink);border-radius:2px;display:inline-block}
.vq-swatch button[aria-pressed=true]{background:var(--vq-ink);color:var(--vq-scrim)}
.vq-swatch button[aria-pressed=true] .dot{border-color:var(--vq-scrim)}
.vq-swatch.vq-wrap button{flex:1 1 50%;min-width:130px}
.vq-swatch.vq-wrap button:nth-child(n+3){border-top:2px solid var(--vq-ink)}

/* calibration-only product switcher */
.vq-calprod{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--vq-ink60)}
.vq-calprod button{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;
  font-size:14px;text-transform:uppercase;letter-spacing:.04em;padding:7px 14px;cursor:pointer;
  background:transparent;color:var(--vq-ink);border:2px solid var(--vq-ink);border-radius:2px}
.vq-calprod button[aria-pressed=true]{background:var(--vq-orange);color:#fff;border-color:var(--vq-orange)}

/* ---------- enquiry form ---------- */
.vq-form{border:2px solid var(--vq-ink);background:var(--vq-panel);padding:clamp(20px,3vw,32px);max-width:760px}
.vq-fgrid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.vq-fgrid + .vq-fgrid{margin-top:16px}
.vq-span2{grid-column:1 / -1}
@media(max-width:560px){.vq-fgrid{grid-template-columns:1fr}.vq-span2{grid-column:auto}}
.vq-field label{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--vq-ink60);margin-bottom:5px}
.vq-field input,.vq-field select,.vq-field textarea{width:100%;font-family:'Barlow',system-ui,sans-serif;
  font-size:17px;padding:12px;border:2px solid var(--vq-ink);border-radius:0;
  background:var(--vq-scrim);color:var(--vq-ink);appearance:none}
.vq-field select:disabled{background:var(--vq-tape);color:#5C6462;cursor:not-allowed}
.vq-field input:focus,.vq-field select:focus,.vq-field textarea:focus{
  outline:3px solid var(--vq-orange);outline-offset:2px}
.vq-hint{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--vq-ink40);
  margin:5px 0 0;letter-spacing:.03em;line-height:1.5}
.vq-hint-block{margin-bottom:12px;color:var(--vq-ink60)}

.vq-sizes{border:0;border-top:2px solid var(--vq-tape);margin:22px 0 0;padding:18px 0 0}
.vq-sizes legend{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:0}
.vq-sizes legend span{color:var(--vq-ink40);font-weight:400}
.vq-sizerow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border:2px solid var(--vq-ink);background:var(--vq-panel);overflow:hidden}
.vq-sizerow label{display:block;padding:8px 4px;text-align:center;
  border-right:1px solid var(--vq-tape);min-width:0}
.vq-sizerow label:last-child{border-right:0}
.vq-sizerow label span{display:block;font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:14px;text-transform:uppercase;margin-bottom:5px;
  color:var(--vq-ink60);letter-spacing:.02em}
.vq-sizerow input{width:100%;border:0;border-top:1px solid var(--vq-tape);background:transparent;
  text-align:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;
  padding:5px 2px;color:var(--vq-ink);-moz-appearance:textfield}
.vq-sizerow input::-webkit-outer-spin-button,
.vq-sizerow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vq-sizerow input:focus{outline:2px solid var(--vq-orange);outline-offset:-2px;position:relative}
@media(max-width:560px){
  .vq-sizerow label{padding:7px 2px}
  .vq-sizerow label span{font-size:12px}
  .vq-sizerow input{font-size:14px;padding:4px 0}
}
.vq-sizetotal{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;
  color:var(--vq-ink60);margin:10px 0 0;letter-spacing:.03em;min-height:1em}

.vq-summary{margin-top:20px;padding:14px 16px;background:var(--vq-scrim);
  border-left:3px solid var(--vq-signal);font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12.5px;line-height:1.7;letter-spacing:.02em}
.vq-summary strong{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:19px;
  text-transform:uppercase;letter-spacing:.02em}

.vq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.vq-submit{display:block;width:100%;margin-top:18px;cursor:pointer;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:20px;
  letter-spacing:.05em;text-transform:uppercase;padding:16px 20px;
  background:var(--vq-signal);color:var(--vq-ink);border:2px solid var(--vq-ink);border-radius:2px;
  transition:background 120ms var(--vq-ease),color 120ms var(--vq-ease)}
.vq-submit:hover{background:var(--vq-ink);color:var(--vq-signal)}
.vq-submit:active{transform:translateY(1px)}
.vq-submit:disabled{background:var(--vq-tape);border-color:var(--vq-tape);color:#F1F3EF;cursor:wait}
.vq-submit:focus-visible{outline:3px solid var(--vq-orange);outline-offset:3px}
.vq-sent .vq-fgrid,.vq-sent .vq-sizes,.vq-sent .vq-summary,.vq-sent .vq-submit{display:none}

/* product toggle inside the visualiser */
.vq-ctrl [data-vq="products"] button{font-size:14px;padding:10px 6px}
.vq-ctrl [data-vq="prodhint"]{margin-top:9px}