/* Wherry Picker: the designer's styles (moved out of wherry-picker.js in 1.127.0). (c) 2026 Pablo Cugliandolo. */

#wherry-picker{
  --navy:#132640; --navy-dark:#0C1929; --green:#1E7A63; --green-dark:#166352;
  --navy-mid:#132640; --paper:#EEF1F0; --white:#fff; --ink:#1A2332; --muted:#5C6B7A; --line:#DDE2E4;
  --amber:#8A5A12; --amber-bg:#FBF1DE;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); line-height:1.55; max-width:1120px; margin:0 auto;
}
#wherry-picker *{box-sizing:border-box}

.wp-grid{display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); gap:26px; align-items:start}
@media (max-width:920px){.wp-grid{grid-template-columns:1fr}}

.wp-panel{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:22px}
.wp-h{font-size:.82rem; font-weight:600; color:var(--navy); margin:0 0 12px}
.wp-note{font-size:.8rem; color:var(--muted); margin:10px 0 0}

.wp-garments{display:flex; gap:8px}
@media (max-width:480px){.wp-garments{flex-wrap:wrap}}
.wp-garment{flex:1 1 0; min-width:92px; border:1px solid var(--line); background:var(--white);
  border-radius:6px; padding:10px 8px; font:inherit; font-size:.86rem; color:var(--ink);
  cursor:pointer; text-align:center; transition:border-color .15s, background .15s}
.wp-garment:hover{border-color:var(--navy)}
.wp-garment[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.wp-garment:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-garment small{display:block; font-size:.72rem; opacity:.72; margin-top:2px}

/* secondary option buttons - lighter than the garment buttons */
.wp-intro{margin:0 0 18px; padding:14px 16px; border-radius:6px; background:var(--paper);
  color:var(--ink); font-size:.88rem; line-height:1.6}
.wp-intro strong{color:var(--navy)}

.wp-opt{margin-top:16px}
.wp-pl{display:block; font-size:.74rem; color:var(--muted); margin-bottom:6px}
.wp-optrow{display:flex; gap:7px; flex-wrap:wrap}
.wp-optbtn{flex:1 1 auto; min-width:92px; border:1px solid var(--line); background:var(--white);
  border-radius:6px; padding:9px 12px; font:inherit; font-size:.85rem; color:var(--ink);
  cursor:pointer; text-align:center; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; transition:background .15s, border-color .15s, color .15s}
.wp-optbtn:hover{border-color:var(--navy-mid)}
.wp-optbtn[aria-pressed="true"]{background:var(--navy-mid); border-color:var(--navy-mid);
  color:var(--paper)}
.wp-optbtn:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-optbtn small{display:block; font-size:.72rem; opacity:.72; margin-top:1px}
.wp-sw{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.22);
  flex:0 0 auto}
.wp-sw.tbc{background:repeating-linear-gradient(45deg,#DDE2E4 0 4px,#FFF 4px 8px)}

.wp-banner{margin:0 0 16px; padding:10px 14px; border-radius:6px; font-size:.85rem;
  background:rgba(30,122,99,.12); color:var(--green-dark); display:none}
.wp-banner.on{display:block}

.wp-lhead .wp-ed{border:0; background:none; font:inherit; font-size:.78rem;
  color:var(--green-dark); cursor:pointer; padding:0 6px; text-decoration:underline}
.wp-lhead .wp-ed:hover{color:var(--navy)}

.wp-views{display:flex; align-items:flex-end; gap:6px;
  background:var(--paper); border-radius:6px; padding:8px 6px}
.wp-views .wp-view{min-width:0}
.wp-view{margin:0; text-align:center}
.wp-view figcaption{font-size:.75rem; color:var(--muted); margin-top:2px}
.wp-svg{width:100%; height:auto; max-height:420px; display:block; margin:0 auto}

.wp-art path:not([fill]){fill:var(--navy)}
.wp-art path[stroke="#292f44"]{stroke:var(--navy)}
.wp-art path[stroke="#797e91"]{stroke:var(--muted); opacity:.7}
.wp-art path[stroke="#e4e5eb"]{stroke:var(--line)}

/* numbered step headings */
.wp-step{display:flex; align-items:center; gap:9px; margin:0 0 12px}
.wp-step-n{flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:var(--navy); color:var(--paper); font-size:.72rem; font-weight:600;
  display:flex; align-items:center; justify-content:center}
.wp-step-t{font-size:1rem; font-weight:600; color:var(--navy); margin:0; line-height:1.3}
.wp-step-s{font-size:.82rem; color:var(--muted); margin:-6px 0 12px 31px}

/* prompt above the drawings */
.wp-hint{display:inline-flex; align-items:center; gap:7px; margin:0 0 10px 31px;
  padding:5px 11px; border-radius:999px; font-size:.8rem; font-weight:500;
  background:var(--green); color:var(--paper)}
.wp-hint.done{background:var(--paper); color:var(--muted); font-weight:400}

.wp-zone{cursor:pointer}
.wp-zone rect{fill:rgba(30,122,99,.10); stroke:var(--green); stroke-width:1.6; stroke-dasharray:6 4;
  opacity:.45; transition:fill .15s, opacity .15s, stroke .15s; vector-effect:non-scaling-stroke}
.wp-zone:hover rect{opacity:1; fill:rgba(30,122,99,.26); stroke-width:2.2}

/* breathe until the first position is chosen */
@keyframes wpBreathe{
  0%,100%{fill:rgba(30,122,99,.08); stroke-opacity:.65}
  50%    {fill:rgba(30,122,99,.24); stroke-opacity:1}
}
#wherry-picker:not(.has-pick) .wp-zone rect{animation:wpBreathe 2.4s ease-in-out infinite}
#wherry-picker:not(.has-pick) .wp-zone:nth-of-type(3) rect{animation-delay:.25s}
#wherry-picker:not(.has-pick) .wp-zone:nth-of-type(4) rect{animation-delay:.5s}
#wherry-picker:not(.has-pick) .wp-zone:nth-of-type(5) rect{animation-delay:.75s}
#wherry-picker:not(.has-pick) .wp-zone:hover rect{animation:none}
.wp-zone:focus-visible{outline:none}
.wp-zone:focus-visible rect{stroke:var(--green); stroke-width:2.4; opacity:1}
.wp-zone[aria-checked="true"] rect{fill:rgba(30,122,99,.24); stroke:var(--green);
  stroke-width:2; stroke-dasharray:none; opacity:1}

.wp-add{width:100%; margin-top:14px; padding:11px 16px; font:inherit; font-size:.88rem;
  font-weight:500; border-radius:4px; cursor:pointer; border:1px dashed var(--green);
  background:var(--green-tint,rgba(30,122,99,.08)); color:var(--green-dark);
  transition:background .15s, border-style .15s}
.wp-add:hover{background:rgba(30,122,99,.16); border-style:solid}
.wp-add:focus-visible{outline:2px solid var(--green); outline-offset:2px}

.wp-lhead{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:10px 0 6px; border-bottom:1px solid var(--line); font-size:.9rem; font-weight:600;
  color:var(--navy)}
.wp-lhead .wp-rm{border:0; background:none; font:inherit; font-size:1rem; line-height:1;
  color:var(--muted); cursor:pointer; padding:0 2px}
.wp-lhead .wp-rm:hover{color:var(--alert,#B3402E)}
.wp-live{font-size:.7rem; font-weight:500; color:var(--green-dark);
  background:rgba(30,122,99,.14); border-radius:999px; padding:2px 8px; margin-left:6px}

.wp-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; min-height:4px}
.wp-chip{display:inline-flex; align-items:center; gap:6px; background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:4px 6px 4px 11px;
  font-size:.78rem; color:var(--navy)}
.wp-chip button{border:0; background:none; font:inherit; font-size:1rem; line-height:1;
  color:var(--muted); cursor:pointer; padding:0 3px; border-radius:50%}
.wp-chip button:hover{color:var(--navy)}
.wp-chip button:focus-visible{outline:2px solid var(--green); outline-offset:1px}

.wp-sizes{display:grid; grid-template-columns:repeat(6,1fr); gap:7px}
@media (max-width:440px){.wp-sizes{grid-template-columns:repeat(3,1fr)}}
.wp-size{border:1px solid var(--line); border-radius:6px; background:var(--white);
  padding:7px 5px 8px; text-align:center; transition:background .15s, border-color .15s}
.wp-size.on{background:var(--navy-mid); border-color:var(--navy-mid)}
.wp-size label{display:block; font-size:.74rem; font-weight:500; color:var(--muted);
  margin-bottom:4px}
.wp-size.on label{color:var(--paper)}
.wp-size input{width:100%; padding:5px 2px; text-align:center; font:inherit; font-size:.95rem;
  font-weight:600; border:1px solid var(--line); border-radius:4px; background:var(--white);
  color:var(--ink); -moz-appearance:textfield}
.wp-size input::-webkit-outer-spin-button,
.wp-size input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.wp-size input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 2px rgba(30,122,99,.16)}

.wp-line{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:.86rem}
.wp-line span:last-child{color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap}
.wp-line.wp-sub span{color:var(--muted); font-size:.8rem}
.wp-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:14px; padding-top:14px; border-top:2px solid var(--navy)}
.wp-total b{font-size:1.55rem; color:var(--navy); font-variant-numeric:tabular-nums}
.wp-total i{font-style:normal; font-size:.8rem; color:var(--muted)}
.wp-empty{color:var(--muted); font-size:.86rem; padding:10px 0; margin:0}

.wp-out{width:100%; min-height:126px; margin-top:12px; padding:10px; font:inherit; font-size:.8rem;
  border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); resize:vertical}
.wp-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.wp-btn{flex:1 1 130px; padding:12px 16px; font:inherit; font-size:.88rem; font-weight:500;
  border-radius:4px; cursor:pointer; border:1px solid var(--navy); background:var(--navy);
  color:var(--paper); text-align:center; text-decoration:none; transition:background .15s}
.wp-btn:hover{background:var(--navy-dark); color:var(--paper)}
.wp-btn.wp-alt{background:var(--green); border-color:var(--green)}
.wp-btn.wp-alt:hover{background:var(--green-dark)}
.wp-btn:focus-visible{outline:2px solid var(--green); outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  #wherry-picker *{transition:none !important; animation:none !important}
}

/* product cards for step 1 */
.wp-garments{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px}
.wp-garment{padding:6px 6px 10px; text-align:left; line-height:1.35}
.wp-garment img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px;
  background:var(--paper); margin-bottom:8px}
.wp-garment span{display:block; font-weight:600; padding:0 4px}
.wp-garment small{padding:0 4px}
.wp-garment[aria-pressed="true"] img{outline:2px solid var(--paper); outline-offset:-2px}
.wp-colour-note{font-size:.74rem; color:var(--muted); margin:6px 0 0}

/* the estimate breakdown: each set, then the order */
.wp-set{margin-bottom:14px}

/* each set a card of its own, so it's clear where one ends and the next starts; the one being set up is dashed green */
#wherry-picker .wp-set{margin-bottom:12px; padding:4px 14px 8px; border:1px solid var(--line); border-radius:8px; background:var(--white)}
#wherry-picker .wp-set.is-live{border:1px dashed var(--green); background:rgba(30,122,99,.04)}
#wherry-picker .wp-set .wp-lhead{align-items:center; margin:0 -14px 4px; padding:9px 14px 8px; border-bottom:1px solid var(--line)}
.wp-lname{display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; min-width:0}
.wp-setn{font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--paper); background:var(--navy);
  border-radius:999px; padding:2px 8px}
.wp-set.is-live .wp-setn{background:var(--green)}
.wp-setdot{width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); flex:0 0 auto}
#wherry-picker .wp-lname .wp-same, #wherry-picker .wp-lname .wp-live{margin-left:0}
.wp-setbtns{display:flex; gap:6px; flex:0 0 auto}
#wherry-picker .wp-lhead .wp-setbtn{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--white);
  border-radius:999px; padding:4px 11px; font:inherit; font-size:.76rem; font-weight:500; color:var(--green-dark); text-decoration:none;
  cursor:pointer; line-height:1.2; transition:background .15s, border-color .15s, color .15s}
#wherry-picker .wp-lhead .wp-setbtn svg{width:13px; height:13px}
#wherry-picker .wp-lhead .wp-setbtn:hover{border-color:var(--green); background:rgba(30,122,99,.08)}
#wherry-picker .wp-lhead .wp-setbin{padding:4px 8px; color:var(--muted)}
#wherry-picker .wp-lhead .wp-setbin:hover{color:var(--alert,#B3402E); border-color:var(--alert,#B3402E); background:rgba(179,64,46,.06)}
#wherry-picker .wp-lhead .wp-setbtn:focus-visible{outline:2px solid var(--green); outline-offset:2px}
#wherry-picker .wp-set .wp-qtyrow{padding-bottom:2px}
.wp-set .wp-line{padding:5px 0}
.wp-line.wp-sub span:first-child{padding-left:10px}
.wp-line.wp-each span{font-weight:600; color:var(--navy)}
.wp-line.wp-qtyrow{border-bottom:0}
.wp-line.wp-qtyrow span:first-child{color:var(--muted); font-size:.8rem}
.wp-order{margin-top:4px; padding-top:6px; border-top:1px solid var(--navy)}
.wp-line.wp-disc span:last-child{color:var(--green-dark); font-weight:600}
#wpUnit{color:var(--green-dark); font-weight:500}

/* estimate and summary: full width after the steps, so they sit just above the enquiry form */
.wp-estimate{margin-top:26px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:26px}
@media (max-width:920px){.wp-estimate{grid-template-columns:1fr}}

/* tall enough to read a set or two without dragging it bigger */
.wp-est-text .wp-out{margin-top:6px; min-height:340px}
@media (max-width:600px){.wp-est-text .wp-out{min-height:260px}}

/* size boxes with - and + either side of the number (the number can still be typed) */

/* kept light: small - and + as plain marks, the number without a box */
#wherry-picker .wp-sizes{grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:6px}
#wherry-picker .wp-size{padding:5px 3px 4px}
.wp-qty{display:flex; align-items:center; gap:0}
#wherry-picker .wp-qty input{flex:1 1 auto; min-width:0; border:0; background:transparent; box-shadow:none; padding:2px 0;
  font-size:.95rem; color:var(--ink)}
#wherry-picker .wp-qty input:focus{box-shadow:0 0 0 2px rgba(30,122,99,.3); border-radius:4px}
#wherry-picker .wp-qty button{flex:0 0 22px; width:22px; height:22px; min-width:0; min-height:0; max-height:22px; box-shadow:none; text-transform:none; letter-spacing:0; border:0; border-radius:50%; background:none; color:var(--muted);
  font:inherit; font-size:1rem; font-weight:500; line-height:1; cursor:pointer; padding:0;
  touch-action:manipulation; -webkit-user-select:none; user-select:none}
#wherry-picker .wp-qty button:hover{background:var(--paper); color:var(--navy)}
#wherry-picker .wp-qty button:disabled{opacity:.3; cursor:default; background:none}
.wp-qty button:focus-visible{outline:2px solid var(--green); outline-offset:1px}
#wherry-picker .wp-size.on .wp-qty input{color:var(--paper)}
#wherry-picker .wp-size.on .wp-qty button{color:rgba(238,241,240,.8)}
#wherry-picker .wp-size.on .wp-qty button:hover{background:rgba(255,255,255,.14); color:#fff}
.wp-finish{display:block; width:100%; margin-top:10px; box-sizing:border-box}
.wp-finish-note{text-align:center}

/* shown inside the enquiry form when Send is pressed too early */
.wp-send-warn{margin:0 0 14px; padding:12px 14px; border-radius:6px; background:#FBF1DE; color:#8A5A12;
  font-size:.9rem; line-height:1.5}
.wp-send-warn p{margin:0 0 8px}
.wp-send-warn button{border:1px solid #8A5A12; background:#fff; color:#8A5A12; border-radius:4px; padding:5px 11px;
  font:inherit; font-size:.85rem; cursor:pointer; margin-right:10px}
.wp-send-warn span{font-size:.82rem}
.wp-card1{margin-bottom:22px}

/* step 2 in its own full-width card (colour, then sizes), so steps 3 and 4 start level in their two columns */
.wp-card2{margin-bottom:22px}

/* the preview button greyed out when the colour has no photos of its own */
#wherry-picker .wp-prevbtn[disabled]{background:var(--paper); border-color:var(--line); color:var(--muted); cursor:not-allowed; box-shadow:none}
#wherry-picker .wp-prevbtn[disabled]:hover{background:var(--paper); border-color:var(--line); color:var(--muted)}

/* zoom: a magnifier on each view; zoomed, one view in a box to pan, with view tabs and − / + */
#wherry-picker .wp-views .wp-view{position:relative}
#wherry-picker .wp-zoombtn{position:absolute; top:4px; right:4px; width:30px; height:30px; padding:5px; border:1px solid var(--line); border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--navy); cursor:pointer; line-height:0; opacity:.85; transition:opacity .15s, border-color .15s}
#wherry-picker .wp-zoombtn svg{width:100%; height:100%}
#wherry-picker .wp-zoombtn:hover, #wherry-picker .wp-zoombtn:focus-visible{opacity:1; border-color:var(--navy)}
@media (max-width:600px){#wherry-picker .wp-zoombtn{width:28px; height:28px; top:2px; right:2px}}
#wherry-picker .wp-views.is-zoomed{display:block; padding:8px}
.wp-zoombar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin:0 0 8px}
.wp-zoomtabs, .wp-zoomctl{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.wp-zoombar button{border:1px solid var(--line); background:var(--white); color:var(--navy); border-radius:999px; padding:4px 11px;
  font:inherit; font-size:.78rem; cursor:pointer; line-height:1.3}
.wp-zoombar button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.wp-zoomctl button[data-zoomk]{width:32px; height:32px; padding:0; font-size:1.1rem; font-weight:600}
.wp-zoombar button[disabled]{opacity:.4; cursor:default}
.wp-zoomctl span{min-width:44px; text-align:center; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}

/* Close zoom: filled, so it's easy to find */
#wherry-picker .wp-zoombar .wp-zoomall{margin-left:6px; background:var(--green); border-color:var(--green); color:#fff; font-weight:600; padding:5px 13px}
#wherry-picker .wp-zoombar .wp-zoomall:hover{background:var(--green-dark)}

/* captions: full on wide screens, short on phones; drawings aligned by their tops */
#wherry-picker .wp-views{align-items:flex-start}
.wp-view figcaption{white-space:nowrap}
.wp-cap-short{display:none}

/* the row's single Zoom button (phones) */
#wherry-picker .wp-zoomrow{display:none}
@media (max-width:600px){
  .wp-cap-long{display:none} .wp-cap-short{display:inline}
  #wherry-picker .wp-views .wp-zoombtn{display:none}
  #wherry-picker .wp-views:not(.is-zoomed){position:relative; padding-top:34px}
  #wherry-picker .wp-zoomrow{display:inline-flex; align-items:center; gap:5px; position:absolute; top:6px; right:6px; border:1px solid var(--line);
    background:var(--white); color:var(--navy); border-radius:999px; padding:4px 11px 4px 8px; font:inherit; font-size:.76rem; font-weight:600; cursor:pointer}
  #wherry-picker .wp-zoomrow svg{width:15px; height:15px}
}
.wp-zoomwrap{height:min(70vh,560px); overflow:auto; background:var(--white); border-radius:6px; touch-action:pan-x pan-y}
@media (max-width:920px){.wp-zoomwrap{height:min(50vh,520px)}}

/* previous / next arrows: over the box's left and right edges, centred top to bottom, not scrolling with it */
.wp-zoomstage{position:relative}
#wherry-picker .wp-zoomnav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px; padding:0 0 3px;
  border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.94); color:var(--navy);
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center}
#wherry-picker .wp-zoomnav:hover{border-color:var(--navy); background:#fff}
#wherry-picker .wp-zoomnav:focus-visible{outline:2px solid var(--green); outline-offset:2px}
#wherry-picker .wp-zoomnav svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* the right one clear of the box's scrollbar */
#wherry-picker .wp-zoomprev{left:8px} #wherry-picker .wp-zoomnext{right:20px}
@media (max-width:600px){#wherry-picker .wp-zoomnav{width:36px; height:36px} #wherry-picker .wp-zoomnext{right:10px}}
.wp-zoomwrap .wp-view{margin:0; width:max-content; min-width:100%; display:flex; justify-content:center; align-items:flex-start}
.wp-zoomwrap .wp-svg{display:block; height:auto; margin:0}

/* the drawing: area boundaries only while an area is open; a calm breathing dot marks each area still to set up */
#wherry-picker .wp-zone .wp-zrect{opacity:0; pointer-events:none; animation:none}

/* hovering a dot (or its design): a hairline grey outline of the print area */
#wherry-picker .wp-zone:not(.is-editing):hover .wp-zrect, #wherry-picker .wp-zone:not(.is-editing):focus-visible .wp-zrect{opacity:1; fill:none;
  stroke:#8A96A3; stroke-width:1; stroke-dasharray:none; vector-effect:non-scaling-stroke; transition:opacity .15s}
#wherry-picker .wp-zone.is-editing .wp-zrect{opacity:1; stroke:var(--help); stroke-width:2.4; stroke-dasharray:none; fill:var(--help); fill-opacity:.1; pointer-events:all}
#wherry-picker .wp-dot{cursor:pointer}
#wherry-picker .wp-dot circle{animation:none; vector-effect:none}
#wherry-picker .wp-dot-hit{fill:transparent; stroke:none}
#wherry-picker .wp-dot-core{fill:var(--green); stroke:#fff; stroke-width:2.5; transform-box:fill-box; transform-origin:center; transition:transform .2s}
#wherry-picker .wp-dot-halo{fill:var(--green); stroke:none; transform-box:fill-box; transform-origin:center; opacity:0;
  animation:wpPeace 3.8s ease-in-out var(--d,0s) infinite !important}
@keyframes wpPeace{0%{transform:scale(1); opacity:.45} 70%,100%{transform:scale(2.7); opacity:0}}
#wherry-picker .wp-dot.is-needed .wp-dot-core, #wherry-picker .wp-dot.is-needed .wp-dot-halo{fill:var(--warn)}

/* a soft shadow lifts every dot off the garment; on a garment the dot's own colour, it turns white with a coloured ring and a glow */
#wherry-picker .wp-dot-core{filter:drop-shadow(0 0 1.5px rgba(0,0,0,.35))}
#wherry-picker .dots-alt .wp-dot:not(.is-needed) .wp-dot-core, #wherry-picker .dots-alt-warn .wp-dot.is-needed .wp-dot-core{fill:#fff;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 0 1.5px rgba(0,0,0,.45))}
#wherry-picker .dots-alt .wp-dot:not(.is-needed) .wp-dot-core{stroke:var(--green)}
#wherry-picker .dots-alt-warn .wp-dot.is-needed .wp-dot-core{stroke:var(--warn)}
#wherry-picker .dots-alt .wp-dot:not(.is-needed) .wp-dot-halo, #wherry-picker .dots-alt-warn .wp-dot.is-needed .wp-dot-halo{fill:#fff}
#wherry-picker .wp-zone:hover .wp-dot-core, #wherry-picker .wp-zone:focus-visible .wp-dot-core{transform:scale(1.25)}
#wherry-picker .wp-dot-tip{opacity:0; pointer-events:none; transition:opacity .15s}
#wherry-picker .wp-dot-tip rect{fill:var(--navy); stroke:none; opacity:1; animation:none}
#wherry-picker .wp-dot-tip text{fill:#fff; font-family:inherit; font-weight:600}
#wherry-picker .wp-dot-tip.on{opacity:1}
@media (prefers-reduced-motion:reduce){#wherry-picker .wp-dot-halo{animation:none !important; opacity:.25; transform:scale(1.8)}}

/* what to do next: a soft, slow green glow (static when motion is reduced), and its step number in green */

/* its colour is the admin's "Next step" colour (--next, set in setMessageColours) */
@keyframes wpNudge{0%,100%{box-shadow:0 0 0 0 var(--next-clear,rgba(30,122,99,0))} 50%{box-shadow:0 0 0 4px var(--next-glow,rgba(30,122,99,.28))}}
#wherry-picker .wp-next-step{animation:wpNudge 2.6s ease-in-out infinite; border-radius:8px}
@media (prefers-reduced-motion:reduce){#wherry-picker .wp-next-step{box-shadow:0 0 0 3px var(--next-glow,rgba(30,122,99,.28))}}
#wherry-picker .wp-step.is-now .wp-step-n{background:var(--next,var(--green)); color:var(--next-ink,#fff); transition:background .3s}

/* what's still missing, under Finish: amber, one item per line, each a link to where it's fixed */
.wp-missing{margin:12px 0 0; padding:10px 14px 10px 12px; border-radius:6px; background:var(--amber-bg); border-left:3px solid var(--warn)}
.wp-missing p{margin:0 0 6px; font-size:.84rem; font-weight:600; color:var(--amber)}
.wp-missing ul{margin:0; padding:0 0 0 18px; list-style:disc; color:var(--amber)}
.wp-missing li{margin:3px 0; font-size:.83rem}
.wp-missing li button{border:0; background:none; padding:0; font:inherit; color:var(--ink); text-align:left; cursor:pointer;
  text-decoration:underline; text-decoration-color:rgba(138,90,18,.4); text-underline-offset:2px}
.wp-missing li button:hover{color:var(--amber); text-decoration-color:currentColor}

/* Reset, at the right of the step 3 heading, and its question */
.wp-resetbtn{margin-left:auto; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--white);
  border-radius:999px; padding:4px 11px; font:inherit; font-size:.76rem; color:var(--muted); cursor:pointer}
.wp-resetbtn svg{width:13px; height:13px}
.wp-resetbtn:hover{color:var(--navy); border-color:var(--navy)}
.wp-resetbtn:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-resetask{margin:-4px 0 14px; padding:12px 14px; border-radius:6px; background:var(--amber-bg); border-left:3px solid var(--warn)}
.wp-resetask p{margin:0 0 8px; font-size:.84rem; font-weight:600; color:var(--ink)}
.wp-resetopts{display:flex; flex-wrap:wrap; gap:8px}
.wp-resetask.wp-anotherask{margin:10px 0 0}
.wp-resetopts button{flex:1 1 180px; text-align:left; border:1px solid var(--line); background:var(--white); border-radius:6px;
  padding:8px 11px; font:inherit; font-size:.82rem; color:var(--ink); cursor:pointer}
.wp-resetopts button:hover{border-color:var(--navy)}
.wp-resetopts small{display:block; font-size:.74rem; color:var(--muted); margin-top:2px; line-height:1.4}
.wp-resetopts .wp-resetno{flex:0 0 auto; align-self:center; border:0; background:none; text-decoration:underline; color:var(--muted)}

/* preset "start from" chips, under the step 3 heading */
.wp-presets{margin:-2px 0 12px 31px}
.wp-presets-h{display:block; font-size:.74rem; color:var(--muted); margin-bottom:6px}
.wp-presets-h small{font-size:inherit; opacity:.8}
.wp-presets-row{display:flex; flex-wrap:wrap; gap:6px}
.wp-preset-chip{border:1px dashed var(--green); background:rgba(30,122,99,.06); color:var(--green-dark); border-radius:999px;
  padding:5px 13px; font:inherit; font-size:.8rem; font-weight:500; cursor:pointer; transition:background .15s, color .15s}
.wp-preset-chip:hover{background:rgba(30,122,99,.16)}
.wp-preset-chip[aria-pressed="true"]{background:var(--green); border-style:solid; color:var(--white)}
.wp-preset-chip:focus-visible{outline:2px solid var(--green); outline-offset:2px}
@media (max-width:480px){.wp-presets{margin-left:0}}
.wp-opt.wp-first{margin-top:4px}
.wp-side{display:flex; flex-direction:column; gap:16px; min-width:0}
.wp-step3{position:relative}
@media (min-width:921px){.wp-side{align-self:stretch}
  .wp-step3{flex:1 1 auto}
  .wp-step3.is-editing{min-height:min(640px, calc(100vh - var(--wp-sticky-top,96px) - 16px))}
  .wp-editor .wp-ed-in{flex:0 0 auto; position:sticky; top:var(--wp-sticky-top,96px); max-height:min(100%, calc(100vh - var(--wp-sticky-top,96px) - 16px))}}
.wp-ed-in{display:flex; flex-direction:column; min-height:0; flex:1 1 auto}
.wp-dempty{margin:0; padding:14px; border:1px dashed var(--line); border-radius:6px}
  padding:6px 14px; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer}

/* under the drawings: what's selected, and the preview button */
.wp-under{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-top:10px}
#wherry-picker .wp-under .wp-hint{margin:0}
.wp-prevbtn{display:inline-flex; align-items:center; gap:7px; margin-left:auto; border:1px solid var(--green); background:var(--green);
  color:#fff; border-radius:999px; padding:7px 16px; box-shadow:0 2px 8px rgba(30,122,99,.3); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer}
.wp-prevbtn:hover{background:var(--green-dark); border-color:var(--green-dark); color:#fff}
.wp-prevbtn:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-prevbtn svg{width:16px; height:16px; flex:0 0 auto}

/* the preview pop-up: a large photo and a thumbnail per view */
.wp-pmodal{position:fixed; inset:0; z-index:99990; background:rgba(12,25,41,.6); display:flex; align-items:center;
  justify-content:center; padding:16px}
.wp-pdialog{position:relative; width:min(560px,100%); max-height:calc(100vh - 32px); overflow:auto; border-radius:8px}
.wp-pdialog #wpModels{margin:0; box-shadow:0 20px 50px rgba(0,0,0,.3)}
.wp-pdialog .wp-model-main canvas{max-height:62vh}
.wp-px{position:absolute; top:10px; right:12px; z-index:2; border:0; background:none; font:inherit; font-size:1.6rem; line-height:1;
  color:var(--muted); cursor:pointer; padding:0 4px}
.wp-px:hover{color:var(--navy)}

/* step 3 in 3D */
.wp-3dstage{position:relative; height:min(66vh,600px); border-radius:6px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%, #fbfbfc, #e6e9ee 72%)}
.wp-3dstatus{position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; padding:16px;
  text-align:center; color:var(--muted); pointer-events:none}
.wp-3dstatus:empty{display:none}
.wp-3dbar{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:10px}
.wp-3dbar button{border:1px solid var(--line); background:var(--paper); color:var(--navy); border-radius:999px; padding:5px 14px;
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer}
.wp-3dbar button:hover{border-color:var(--navy)}
.wp-3dbar button:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* the garment in place of the drawings, with the drawings' dots floating on it */
#wherry-picker .wp-views.is-3d{display:block; padding:0; background:none}
.wp-3dmain .wp-3dstage{height:min(64vh,560px); min-height:320px}
@media (max-width:920px){.wp-3dmain .wp-3dstage{height:52vh; min-height:300px}}
.wp-3dmain .wp-3dbar{margin-top:8px}
.w3d-dot{width:30px; height:30px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer}
.w3d-dot i{position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%;
  background:var(--green); border:2.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.35); transition:transform .2s}
.w3d-dot::before{content:''; position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%;
  background:var(--green); opacity:0; animation:wpPeace 2.6s ease-out infinite}
.w3d-dot.is-needed i, .w3d-dot.is-needed::before{background:var(--warn)}
.w3d-dot:hover i, .w3d-dot:focus-visible i{transform:scale(1.25)}
.w3d-dot:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.w3d-tip{position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); padding:4px 10px; border-radius:12px; background:var(--navy); color:#fff;
  font-size:.78rem; font-weight:600; line-height:1.2; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.25)}
.w3d-dot:hover .w3d-tip, .w3d-dot:focus-visible .w3d-tip{opacity:1}
.w3d-dot:hover, .w3d-dot:focus-visible{z-index:4}
@media (prefers-reduced-motion:reduce){.w3d-dot::before{animation:none; opacity:.25; transform:scale(1.8)}}

/* under the step 3 heading, on types with a 3D model: customise on the drawings or in 3D */
.wp-3dtoggle{display:inline-flex; margin:-4px 0 12px 31px; padding:3px; border-radius:999px; background:var(--paper); border:1px solid var(--line)}
.wp-3dtoggle button{border:0; background:none; border-radius:999px; padding:6px 14px; font:inherit; font-size:.82rem; font-weight:600;
  color:var(--muted); cursor:pointer; white-space:nowrap; transition:background .15s, color .15s}
@media (max-width:480px){.wp-3dtoggle{margin-left:0} .wp-3dtoggle button{padding:6px 11px; font-size:.78rem}}
.wp-3dtoggle button:hover{color:var(--navy)}
.wp-3dtoggle button[aria-pressed="true"]{background:var(--navy); color:var(--paper)}
.wp-3dtoggle button:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-model-main{display:block; width:100%; padding:0; border:0; border-radius:6px; overflow:hidden; background:var(--paper);
  cursor:zoom-in; position:relative}
.wp-model-main canvas{display:block; width:100%; height:auto; max-height:52vh; object-fit:contain; margin:0 auto}
.wp-model-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:6px; margin-top:8px}
.wp-model{display:block; padding:0; border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background:var(--paper); cursor:pointer; position:relative}
.wp-model[aria-pressed="true"]{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy)}
.wp-model canvas{display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover}
.wp-model:focus-visible,.wp-model-main:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-model.busy::after,.wp-model-main.busy::after{content:''; position:absolute; inset:0; background:rgba(238,241,240,.55)}
.wp-lightbox{position:fixed; inset:0; z-index:99999; background:rgba(12,25,41,.86); display:flex;
  align-items:center; justify-content:center; padding:24px; cursor:zoom-out}
.wp-lightbox canvas{max-width:100%; max-height:100%; width:auto; height:auto; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.4)}
.wp-lightbox button{position:absolute; top:14px; right:18px; border:0; background:none; color:#EEF1F0;
  font:inherit; font-size:2rem; line-height:1; cursor:pointer}
#wherry-picker [hidden]{display:none !important}
.wp-dimg{cursor:move; touch-action:none}
.wp-dimg:focus{outline:none}
.wp-dimg:focus-visible{outline:2px solid var(--green)}

/* step 3: a design per position */
.wp-design .wp-ed{border:0; background:none; font:inherit; font-size:.78rem; color:var(--green-dark);
  cursor:pointer; text-decoration:underline; padding:0}
.wp-design{border:1px solid var(--line); border-radius:6px; padding:12px 14px; margin-top:10px; background:var(--white)}
.wp-design-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px}
.wp-design-head b{color:var(--navy); font-size:.92rem}
.wp-design-head span{font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums}
.wp-seg{display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:10px}
.wp-seg button{border:0; background:var(--white); font:inherit; font-size:.8rem; padding:6px 12px; cursor:pointer; color:var(--ink)}
.wp-seg button + button{border-left:1px solid var(--line)}
.wp-seg button[aria-pressed="true"]{background:var(--navy); color:var(--paper)}
.wp-seg button:focus-visible,.wp-font:focus-visible,.wp-ink:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* a different name on each piece */
.wp-nseg{display:flex; flex-wrap:wrap; width:fit-content; max-width:100%}
.wp-nseg button{font-size:.76rem; padding:5px 10px}
.wp-nlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 10px; max-height:320px; overflow:auto; padding:2px}
.wp-nrow{display:flex; align-items:center; gap:6px; font-size:.74rem; color:var(--muted)}
.wp-nrow span{flex:0 0 46px; font-variant-numeric:tabular-nums; white-space:nowrap}
.wp-nrow input{flex:1 1 auto; min-width:0; padding:5px 8px; font:inherit; font-size:.86rem; color:var(--ink);
  border:1px solid var(--line); border-radius:4px; background:var(--white)}
.wp-nrow input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 2px rgba(30,122,99,.16)}
.wp-same{font-size:.7rem; font-weight:500; color:var(--muted); background:var(--paper); border-radius:999px; padding:2px 8px; margin-left:6px}
.wp-tip{position:relative; background:var(--navy); color:var(--paper); border-radius:8px; padding:12px 14px 10px; margin:10px 0 14px;
  font-size:.84rem; line-height:1.5; box-shadow:0 6px 18px rgba(19,38,64,.22); animation:wpTipIn .25s ease-out}
.wp-tip:after{content:''; position:absolute; left:26px; bottom:-7px; border:7px solid transparent; border-bottom:0; border-top-color:var(--navy)}
.wp-tip p{margin:0 0 8px}
.wp-tip b{display:block; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; opacity:.7; margin-bottom:2px}
.wp-tip div{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.wp-tip button{font:inherit; font-size:.8rem; cursor:pointer; border-radius:4px}
.wp-tip [data-t=ok]{background:var(--paper); color:var(--navy); border:0; padding:5px 14px; font-weight:600}
.wp-tip [data-t=off]{background:none; border:0; color:var(--paper); opacity:.75; text-decoration:underline; padding:5px 0}
.wp-tip button:focus-visible{outline:2px solid var(--green); outline-offset:2px}
@keyframes wpTipIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.wp-tiptoggle{border:1px solid var(--line); background:var(--white); border-radius:999px; font:inherit; font-size:.74rem;
  color:var(--muted); padding:2px 10px; cursor:pointer; margin-left:4px; vertical-align:1px}
.wp-tiptoggle[aria-pressed="true"]{color:var(--green-dark); border-color:var(--green)}
.wp-minwarn{font-size:.8rem; color:var(--amber); background:var(--amber-bg); border-radius:4px; padding:8px 10px; margin:12px 0 0}

/* the enquiry form */
.wp-send{margin-top:18px}
.wp-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px}
@media (max-width:600px){.wp-fields{grid-template-columns:1fr}}
.wp-fields label{display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--muted)}
.wp-fields label span{color:var(--amber)}
.wp-fields .wp-wide{grid-column:1/-1}
.wp-fields input,.wp-fields textarea{font:inherit; font-size:.92rem; color:var(--ink); padding:8px 10px; border:1px solid var(--line);
  border-radius:4px; background:var(--white); width:100%}
.wp-fields input:focus,.wp-fields textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 2px rgba(30,122,99,.16)}
.wp-fields .wp-rush{grid-column:1/-1; margin:0}

/* "When do you need them?" */
.wp-timing{border:1px solid var(--line); border-radius:6px; padding:10px 12px 12px; margin:0; display:flex; flex-direction:column; gap:8px}
.wp-timing legend{font-size:.8rem; color:var(--muted); padding:0 4px}
.wp-timing legend span{color:var(--amber)}
#wherry-picker .wp-fields .wp-radio{flex-direction:row; align-items:center; gap:8px; font-size:.9rem; color:var(--ink); cursor:pointer}
#wherry-picker .wp-fields .wp-radio input{width:auto; margin:0; accent-color:var(--green)}
#wherry-picker .wp-fields .wp-datebox{max-width:240px}
.wp-timing-note{margin:0; font-size:.78rem; color:var(--muted); line-height:1.45}

/* delivery choice, in the estimate */
.wp-deliv{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.wp-deliv .wp-h{margin:0 0 2px}

/* delivery as its own card, like the sets: amber edge until chosen, green once chosen */
#wherry-picker .wp-deliv{margin:0 0 12px; padding:0 14px 12px; border:1px solid var(--line); border-radius:8px; background:var(--white)}
#wherry-picker .wp-deliv.is-needed{border-color:var(--warn); box-shadow:inset 3px 0 0 var(--warn)}
#wherry-picker .wp-deliv.is-set{border-color:var(--green)}
.wp-dhead{display:flex; align-items:center; gap:8px; margin:0 -14px 4px; padding:9px 14px 8px; border-bottom:1px solid var(--line)}
.wp-dhead svg{width:18px; height:18px; color:var(--navy); flex:0 0 auto}
#wherry-picker .wp-dhead .wp-h{margin:0; font-size:.9rem}
.wp-dtag{margin-left:auto; font-size:.7rem; font-weight:600; border-radius:999px; padding:2px 9px; white-space:nowrap}
.wp-deliv.is-needed .wp-dtag{background:var(--amber-bg); color:var(--amber)}
.wp-deliv.is-set .wp-dtag{background:rgba(30,122,99,.14); color:var(--green-dark)}
.wp-dopt{display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border:1px solid var(--line); border-radius:6px; cursor:pointer; font-size:.86rem}
.wp-dopt:hover{border-color:var(--navy)}
.wp-dopt.on{border-color:var(--green); background:var(--ok-bg)}
.wp-dopt input{margin:3px 0 0; accent-color:var(--green)}
.wp-dopt span{flex:1 1 auto; min-width:0}
.wp-dopt b{color:var(--navy); font-weight:600}
.wp-dopt em{font-style:normal; float:right; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}
.wp-dopt small{display:block; clear:both; font-size:.76rem; color:var(--muted); margin-top:2px}
.wp-dneed{margin:0; font-size:.78rem; color:var(--amber)}

/* the delivery address, with the address search above it */
.wp-addr{display:flex; flex-direction:column; gap:6px; font-size:.8rem}
#wherry-picker .wp-fields .wp-addr > label{display:block}
.wp-addr-find{display:flex; flex-direction:column; gap:4px}

/* Google's search box follows the device's dark mode unless told otherwise: keep it light, like the form */
#wherry-picker .wp-addr-find gmp-place-autocomplete{width:100%; color-scheme:light !important; background-color:#fff !important;
  color:var(--ink) !important; border:1px solid var(--line); border-radius:4px}
.wp-addr-find input{font:inherit; font-size:.92rem; padding:8px 10px; border:1px solid var(--line); border-radius:4px}
.wp-addr-find small{color:var(--muted); font-size:.74rem}

/* a label's text and its * on one line */
#wherry-picker .wp-fields .wp-lt{color:var(--muted)}
#wherry-picker .wp-fields .wp-lt span{color:var(--amber)}
.wp-rush{display:none; font-size:.8rem; color:var(--amber); background:var(--amber-bg); border-radius:4px; padding:8px 10px}
.wp-rush.on{display:block}
.wp-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.wp-consent{margin:14px 0 4px; align-items:flex-start; color:var(--ink)}
.wp-consent input{margin-top:3px}
.wp-consent a{color:var(--green-dark)}
.wp-send-msg{font-size:.84rem; color:#8A2E1F; background:rgba(179,64,46,.1); border-radius:4px; padding:8px 10px; margin:10px 0 0}
.wp-send-btn{margin-top:14px; width:100%; flex:none}
.wp-send-btn:disabled{opacity:.7; cursor:progress}
.wp-sent{font-size:.92rem}
.wp-sent-h{font-size:1.1rem; font-weight:600; color:var(--green-dark); margin:0 0 6px}
.wp-sent .wp-btn{display:inline-block; flex:none}

/* print areas: a white halo keeps the dashed outline visible on dark and light garments alike */
.wp-zone rect{opacity:.8; filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 .6px rgba(255,255,255,.95))}

/* the garment colour named above the drawings */
.wp-colournote{display:flex; align-items:center; gap:7px; margin:0 0 8px 31px; font-size:.84rem; font-weight:600; color:var(--navy)}
.wp-colournote i{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.22); flex:0 0 auto}
.wp-colournote i.tbc{background:repeating-linear-gradient(45deg,#DDE2E4 0 4px,#FFF 4px 8px)}
.wp-colournote span{font-weight:400; color:var(--muted)}

/* "How it works" */
.wp-intro .wp-intro-h{margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.wp-intro ol{margin:8px 0 0; padding-left:22px}
.wp-how-btn{display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer}
.wp-how-btn:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:4px}
.wp-how-btn i{width:7px; height:7px; border-right:2px solid var(--navy); border-bottom:2px solid var(--navy); transform:rotate(45deg); margin:-3px 2px 0}
.wp-how-btn[aria-expanded="true"] i{transform:rotate(-135deg); margin-top:3px}

/* "What you can do here" is too cramped on phones: left out there */
@media (max-width:600px){#wherry-picker .wp-showcase{display:none}}
.wp-intro li{margin:0 0 5px; padding-left:2px}
.wp-intro li:last-child{margin-bottom:0}
.wp-intro li b{color:var(--navy); font-weight:600}
.wp-intro li::marker{color:var(--green); font-weight:700}

/* "What you can do here" */
.wp-showcase{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin:0 0 14px;
  display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap}
.wp-show-h{margin:0; font-size:.84rem; font-weight:600; color:var(--navy); display:flex; align-items:center; gap:7px; white-space:nowrap}
.wp-show-strip{list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto}
.wp-show-strip li{position:relative; margin:0}
.wp-show-chip{display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--paper); border-radius:999px;
  padding:3px 11px 3px 4px; font:inherit; font-size:.78rem; font-weight:600; color:var(--navy); cursor:help}
.wp-show-chip:hover,.wp-show-strip li.is-open .wp-show-chip{border-color:var(--navy); background:var(--white)}
.wp-show-chip:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-show-chip svg{width:50px; height:20px; flex:0 0 auto}
.wp-show-chip em{font-style:normal; font-size:.62rem; color:var(--paper); background:var(--green); border-radius:999px; padding:1px 6px}

/* the details: a bubble under the chip on hover, focus or tap */
.wp-show-tip{display:none; position:absolute; z-index:30; top:calc(100% + 8px); left:0; width:240px; max-width:80vw;
  background:var(--navy); color:var(--paper); font-size:.78rem; line-height:1.45; border-radius:8px; padding:9px 11px;
  box-shadow:0 8px 20px rgba(19,38,64,.25)}
.wp-show-tip:before{content:''; position:absolute; top:-6px; left:18px; border:6px solid transparent; border-top:0; border-bottom-color:var(--navy)}
.wp-show-strip li:hover .wp-show-tip,.wp-show-chip:focus-visible + .wp-show-tip,.wp-show-strip li.is-open .wp-show-tip{display:block}

/* the first visit: a soft glow to catch the eye */
@keyframes wpShowGlow{0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,0)} 50%{box-shadow:0 0 0 5px rgba(217,164,65,.35)}}
.wp-showcase.is-new{animation:wpShowGlow 1.6s ease-in-out 3; border-color:#D9A441}

/* phones: the chips scroll sideways in one row */
@media (max-width:600px){.wp-show-strip{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}
  .wp-show-tip{position:fixed; left:16px; right:16px; top:auto; bottom:16px; width:auto; max-width:none}
  .wp-show-tip:before{display:none}}

/* garment type chips (bigger ranges) */
.wp-gfilter{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.wp-gfilter button{border:1px solid var(--line); background:var(--white); border-radius:999px; font:inherit; font-size:.8rem;
  color:var(--ink); padding:4px 12px; cursor:pointer}
.wp-gfilter button span{color:var(--muted); font-size:.72rem; margin-left:2px}
.wp-gfilter button:hover{border-color:var(--navy)}
.wp-gfilter button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.wp-gfilter button[aria-pressed="true"] span{color:var(--paper); opacity:.75}
.wp-gfilter button:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* the steps column never grows wider than the screen, whatever scrolls sideways inside it */
@media (max-width:920px){.wp-grid{grid-template-columns:minmax(0,1fr)}}
.wp-grid > .wp-panel{min-width:0}

/* phones: a long list of garments is one row to swipe through, with the next one peeking in */
@media (max-width:600px){.wp-garments.is-many{display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
  .wp-garments.is-many .wp-gcard{flex:0 0 40%; min-width:0; scroll-snap-align:start}}

/* the product's photos in step 1 */
.wp-gallery{margin-top:10px}

/* Photos and Details over the garment's picture, stacked at its top right */
.wp-gbtns{position:absolute; top:12px; right:12px; display:flex; flex-direction:column; align-items:flex-end; gap:5px}
#wherry-picker .wp-gbtns .wp-gphotos{position:static}

/* the Details panel: white, readable, scrolls when long; it sits on the page, outside #wherry-picker */
.wp-lb-info{align-items:center; justify-content:center; padding:16px}
.wp-info{position:relative; background:#fff; color:#1A2332; width:min(560px,100%); max-height:86vh; overflow:auto; border-radius:10px;
  padding:22px 24px 20px; box-shadow:0 10px 40px rgba(0,0,0,.35); font:15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; text-align:left}
.wp-info h3{margin:0 34px 2px 0; font-size:1.15rem; color:#132640}
.wp-info-price{margin:0 0 12px; font-size:.82rem; color:#5C6B7A}
.wp-info-txt p{margin:0 0 10px} .wp-info-txt ul{margin:0 0 10px; padding-left:20px}
.wp-info details{margin-top:6px; border-top:1px solid #DDE2E4; padding-top:8px}
.wp-info summary{cursor:pointer; font-weight:600; color:#166352; margin-bottom:6px}
.wp-lightbox .wp-info .wp-lb-close{top:10px; right:12px; color:#5C6B7A; font-size:1.6rem; line-height:1; padding:4px 8px}
.wp-gallery .wp-pl span{opacity:.8}
.wp-gallery-row{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px}
.wp-gallery-row button{flex:0 0 64px; height:80px; padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--paper); cursor:zoom-in}
.wp-gallery-row button:hover{border-color:var(--navy)}
.wp-gallery-row button:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-gallery-row img{width:100%; height:100%; object-fit:cover; display:block}
.wp-lb-gallery img{max-width:100%; max-height:100%; width:auto; height:auto; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.4); cursor:default}
.wp-lightbox .wp-lb-nav{top:50%; transform:translateY(-50%); right:auto; font-size:3rem; padding:10px 14px; background:rgba(12,25,41,.35); border-radius:6px}
.wp-lightbox .wp-lb-prev{left:10px}
.wp-lightbox .wp-lb-next{right:10px; left:auto}
.wp-lb-count{position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#EEF1F0; font-size:.85rem}
.wp-ncount,.wp-nnote{font-size:.76rem; color:var(--muted); margin:8px 0 0}
.wp-filerow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.wp-filebtn{position:relative; display:inline-block; border:1px dashed var(--green); color:var(--green-dark);
  background:rgba(30,122,99,.06); border-radius:6px; padding:7px 14px; font-size:.84rem; font-weight:500; cursor:pointer}
.wp-filebtn:hover{background:rgba(30,122,99,.14)}
.wp-filebtn input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.wp-filebtn:focus-within{outline:2px solid var(--green); outline-offset:2px}
.wp-fname{font-size:.8rem; color:var(--muted); overflow-wrap:anywhere}
.wp-fname b{color:var(--ink); font-weight:500}
.wp-tick{display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); margin-top:8px}
.wp-tick input{accent-color:var(--green)}
.wp-dwarn{font-size:.78rem; color:var(--amber); background:var(--amber-bg); border-radius:4px; padding:6px 9px; margin:8px 0 0}
.wp-design textarea{width:100%; min-height:58px; padding:8px 10px; font:inherit; font-size:.92rem; border:1px solid var(--line);
  border-radius:4px; resize:vertical; color:var(--ink); background:var(--white)}
.wp-design textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 2px rgba(30,122,99,.16)}
.wp-fgroup{margin-top:8px}
.wp-fgroup > span{display:block; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.wp-fonts{display:flex; flex-wrap:wrap; gap:6px}
.wp-font{border:1px solid var(--line); background:var(--white); border-radius:6px; padding:5px 10px; font-size:1.05rem;
  line-height:1.3; cursor:pointer; color:var(--ink)}
.wp-font[aria-pressed="true"]{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy); background:var(--paper)}
.wp-inks{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.wp-ink{width:28px; height:28px; border-radius:50%; border:1px solid rgba(0,0,0,.2); cursor:pointer; padding:0}
.wp-ink[aria-pressed="true"]{box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--navy)}
.wp-sizeline{display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:12px; font-size:.8rem; color:var(--muted)}

/* fixed width, and the readout on its own line, so the slider never moves while it is dragged */
.wp-sizeline input{flex:0 0 200px; width:200px; max-width:100%; accent-color:var(--green)}
.wp-sizeline output{flex:1 0 100%; color:var(--ink); font-variant-numeric:tabular-nums}
.wp-files-note{font-size:.8rem; margin:10px 0 0; padding:8px 10px; border-radius:4px; background:var(--paper); color:var(--ink)}
.wp-movehint{font-size:.75rem; color:var(--muted); margin:4px 0 0}

/* design cards: numbered, and clearly unfinished until they have a design */
.wp-design{border-width:2px; transition:border-color .2s, background .2s}
.wp-design.is-needed,.wp-design.is-part{border-color:#D9A441; background:#FFFBF2}
.wp-design.is-ready{border-color:var(--green)}
.wp-design.is-later{border-color:var(--line); border-style:dashed}
.wp-design-head{justify-content:flex-start; align-items:center; margin-bottom:2px}
.wp-design-head .wp-dnum{flex:0 0 auto; min-width:30px; height:22px; padding:0 7px; border-radius:11px; background:var(--navy);
  color:var(--paper); font-size:.72rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center}
.wp-design-head .wp-dstate{margin-left:auto; font-size:.72rem; font-weight:600; border-radius:99px; padding:2px 9px; white-space:nowrap}
.is-needed .wp-design-head .wp-dstate,.is-part .wp-design-head .wp-dstate{background:var(--amber-bg); color:var(--amber)}
.is-ready .wp-design-head .wp-dstate{background:rgba(30,122,99,.12); color:var(--green-dark)}
.is-later .wp-design-head .wp-dstate{background:var(--paper); color:var(--muted)}
.wp-darea{font-size:.75rem; color:var(--muted); margin:0 0 10px 39px}

/* the card heading is a button that opens and closes the card */
.wp-design .wp-design-head{width:100%; display:flex; align-items:center; gap:9px; padding:2px 0; margin:0 0 2px;
  border:0; background:none; font:inherit; text-align:left; cursor:pointer; color:inherit}
.wp-design .wp-design-head:hover b{text-decoration:underline}
.wp-design .wp-design-head:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:4px}
.wp-design-head .wp-dstate{margin-left:auto}
.wp-design-head .wp-dtoggle{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600;
  color:var(--navy); border:1px solid var(--line); border-radius:99px; padding:2px 9px 2px 10px; background:var(--white)}
.wp-dtoggle i{width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-135deg) translate(-1px,-1px); transition:transform .15s}
.wp-design-head[aria-expanded="false"] .wp-dtoggle i{transform:rotate(45deg) translate(-1px,-1px)}
.wp-dsummary{margin:4px 0 0 39px; font-size:.8rem; color:var(--ink); overflow-wrap:anywhere}
.wp-collapse{display:block; margin-top:12px; border:1px solid var(--green); background:rgba(30,122,99,.08); color:var(--green-dark);
  font:inherit; font-size:.8rem; font-weight:500; border-radius:6px; padding:6px 12px; cursor:pointer}
.wp-collapse:hover{background:rgba(30,122,99,.16)}
.wp-later{border:0; background:none; font:inherit; font-size:.78rem; color:var(--muted); text-decoration:underline;
  cursor:pointer; padding:0; margin-top:10px}
.wp-later:hover{color:var(--navy)}
.wp-pending{margin:14px 0 0; padding:9px 12px; border-radius:6px; background:var(--amber-bg); color:var(--amber); font-size:.82rem}
.wp-hint.next{cursor:pointer; background:#D9A441; color:#fff}
@keyframes wpNewCard{0%{box-shadow:0 0 0 0 rgba(217,164,65,.55)} 100%{box-shadow:0 0 0 12px rgba(217,164,65,0)}}
.wp-design.is-new{animation:wpNewCard 1.1s ease-out 2}
#wherry-picker{--help:#1F6FB2; --help-bg:#E9F1F8; --help-ink:#fff; --warn:#B26A00; --ok:#1E7A63; --ok-bg:#E6F4EE}
.wp-help-ic{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  background:var(--help,#1F6FB2); color:var(--help-ink,#fff); font:italic 700 12px/1 Georgia,serif; flex:0 0 auto}
.wp-tip{background:var(--help); color:var(--help-ink); box-shadow:0 6px 18px rgba(0,0,0,.18)}
.wp-tip:after{border-top-color:var(--help)}
.wp-tip b{opacity:1; display:flex; align-items:center; gap:6px}
.wp-tip b .wp-help-ic{background:var(--help-ink); color:var(--help)}
.wp-tip [data-t=ok]{background:var(--help-ink); color:var(--help)}
.wp-tip [data-t=off]{color:var(--help-ink)}
.wp-hint{background:var(--help); color:var(--help-ink)}
.wp-hint.next{background:var(--help); color:var(--help-ink)}
.wp-hint:before{content:'?'; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:var(--help-ink); color:var(--help); font-weight:700; font-size:.72rem}
.wp-hint.done:before{background:var(--muted); color:#fff}
.wp-step-s{background:var(--help-bg); border-left:3px solid var(--help); border-radius:0 6px 6px 0; padding:6px 10px; color:var(--ink)}
.wp-step-s:before{content:'i'; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:var(--help); color:var(--help-ink); font:italic 700 11px/1 Georgia,serif; margin-right:7px; vertical-align:1px}
.wp-intro .wp-intro-h strong{display:inline-flex; align-items:center; gap:7px}
.wp-intro .wp-intro-h strong:before{content:'?'; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--help); color:var(--help-ink); font-size:.74rem; font-weight:700}

/* warnings: the amber of the reminders, the cards still needing a design, and notes */
.wp-pending{border-left:3px solid var(--warn)}
.wp-design.is-needed,.wp-design.is-part{border-color:var(--warn); background:var(--amber-bg)}

/* ready and done */
.wp-design.is-ready{border-color:var(--ok)}
.is-ready .wp-design-head .wp-dstate{background:var(--ok-bg); color:var(--ok)}
.wp-sent-h{color:var(--ok)}

/* step 3 as a list of the chosen areas; each opens its design panel */
.wp-drow-wrap{display:flex; gap:6px; margin-top:8px}
.wp-drow{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; text-align:left; padding:10px 12px;
  border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:6px; background:var(--white);
  font:inherit; color:var(--ink); cursor:pointer}
.wp-drow:hover{border-top-color:var(--navy); border-right-color:var(--navy); border-bottom-color:var(--navy)}
.wp-drow:focus-visible,.wp-dbin:focus-visible,.wp-ed-x:focus-visible,.wp-ed-bin:focus-visible,.wp-ed-done:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-drow.is-ready{border-left-color:var(--ok)} .wp-drow.is-later{border-left-color:var(--muted)}
.wp-drow.is-open{box-shadow:0 0 0 2px var(--help)}
.wp-drow .wp-dnum,.wp-ed-head .wp-dnum{flex:0 0 auto; min-width:30px; height:22px; padding:0 7px; border-radius:11px;
  background:var(--navy); color:var(--paper); font-size:.72rem; font-weight:600; display:inline-flex; align-items:center;
  justify-content:center; font-variant-numeric:tabular-nums}
.wp-drow-t{flex:1 1 auto; min-width:0}
.wp-drow-t b{display:block; color:var(--navy); font-size:.9rem}
.wp-drow-t small{display:block; font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wp-ed-head .wp-dstate{display:none}
.wp-drow .wp-dstate,.wp-ed-head .wp-dstate{flex:0 0 auto; font-size:.72rem; font-weight:600; border-radius:99px; padding:2px 9px; white-space:nowrap}
.is-needed .wp-dstate,.is-part .wp-dstate{background:var(--amber-bg); color:var(--amber)}
.is-ready .wp-dstate{background:var(--ok-bg); color:var(--ok)}
.is-later .wp-dstate{background:var(--paper); color:var(--muted)}
.wp-dbin{flex:0 0 40px; border:1px solid var(--line); background:var(--white); color:#B3402E; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0}
.wp-dbin:hover,.wp-ed-bin:hover{background:#B3402E; border-color:#B3402E; color:#fff}
.wp-dbin svg,.wp-ed-bin svg{width:16px; height:16px; flex:0 0 auto}

/* the area being edited, on the drawing */
.wp-zone.is-editing rect{stroke:var(--help); stroke-width:2.4; stroke-dasharray:none; opacity:1; fill:var(--help); fill-opacity:.1}

/* the design panel: beside the drawings on wide screens, a sheet from the bottom on phones */
.wp-editor{background:var(--white); border:1px solid var(--line); border-radius:8px; display:flex; flex-direction:column;
  box-shadow:0 8px 24px rgba(19,38,64,.12); min-width:0}
@keyframes wpEdIn{from{opacity:0; transform:translateX(24px)}}
@keyframes wpEdUp{from{transform:translateY(100%)}}

/* closing: slides out to the right (down on phones) */
@keyframes wpEdOut{to{opacity:0; transform:translateX(40px)}}
@keyframes wpEdDown{to{transform:translateY(100%)}}
@media (min-width:921px){#wherry-picker .wp-editor.is-closing{animation:wpEdOut .22s ease-in forwards}}
@media (max-width:920px){#wherry-picker .wp-editor.is-closing{animation:wpEdDown .22s ease-in forwards}}
@media (min-width:921px){.wp-editor{position:absolute; inset:-1px; z-index:4; animation:wpEdIn .25s ease-out}}
@media (max-width:920px){.wp-editor{position:fixed; left:0; right:0; bottom:0; z-index:9990; max-height:62vh;
    border-radius:14px 14px 0 0; border-bottom:0; box-shadow:0 -10px 30px rgba(19,38,64,.18); animation:wpEdUp .25s ease-out}
  #wherry-picker.is-editing{padding-bottom:64vh}
  .wp-ed-grab{display:block !important; box-sizing:content-box; padding:10px 60px 6px; background-clip:content-box; margin:0 auto; cursor:grab; touch-action:none}
  .wp-ed-head{touch-action:none}
  .wp-ed-bin span{display:none}}
.wp-ed-grab{display:none; width:40px; height:4px; border-radius:2px; background:var(--line); margin:8px auto 0}
.wp-ed-head{display:flex; align-items:center; gap:10px; padding:12px 16px 10px; border-bottom:1px solid var(--line)}
.wp-ed-t{flex:1 1 auto; min-width:0}
.wp-ed-t b{display:block; color:var(--navy); font-size:.98rem}
.wp-ed-t small{display:block; font-size:.76rem; color:var(--muted)}
.wp-ed-x{flex:0 0 auto; border:0; background:none; font:inherit; font-size:1.5rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px}
.wp-ed-x:hover{color:var(--navy)}
.wp-ed-body{flex:1 1 auto; overflow:auto; padding:12px 16px}
.wp-ed-foot{display:flex; align-items:center; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line)}
.wp-ed-bin{display:inline-flex; align-items:center; gap:6px; border:1px solid #E5B9B1; background:#FDF1EF; color:#B3402E;
  border-radius:5px; padding:7px 11px; font:inherit; font-size:.82rem; font-weight:500; cursor:pointer}
.wp-ed-keep{font-size:.76rem; color:var(--muted); line-height:1.35}
.wp-ed-done{margin-left:auto; border:0; background:var(--green); color:#fff; border-radius:5px; padding:9px 20px;
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer}
.wp-ed-done:hover{background:var(--green-dark)}
.wp-editor .wp-design{border:0; padding:0; margin:0; background:none; animation:none}
.wp-editor .wp-design-head,.wp-editor .wp-dsummary,.wp-editor .wp-collapse,.wp-editor .wp-darea{display:none !important}

/* "removed" with Undo */
.wp-undo{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:10000; display:flex; gap:14px; align-items:center;
  background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px; font-size:.88rem; box-shadow:0 8px 24px rgba(0,0,0,.2)}
.wp-undo button{border:0; background:none; color:#9FD8C6; font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; padding:0}

/* inside the design panel: labelled sections, as in the prototype */
.wp-editor .wp-sec + .wp-sec,.wp-editor .wp-ready .wp-sec{margin-top:16px}
.wp-editor .wp-sec + .wp-ready{margin-top:0}
.wp-lbl{display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 7px}
.wp-lbl small{font-weight:500; letter-spacing:0; text-transform:none; margin-left:4px}
.wp-modes{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:6px}
.wp-mode{display:flex; flex-direction:column; align-items:center; gap:1px; border:1px solid var(--line); background:var(--white);
  border-radius:6px; padding:8px 4px; font:inherit; font-size:.8rem; color:var(--ink); cursor:pointer; transition:background .15s, border-color .15s}
.wp-mode i{font-style:normal; font-size:1rem; line-height:1.25; font-weight:600}
.wp-mode:hover{border-color:var(--navy)}
.wp-mode[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.wp-mode:focus-visible,.wp-fdd-btn:focus-visible,.wp-fdd-o:focus-visible,.wp-pos button:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-tipbox{margin:12px 0 0; padding:8px 11px; border-left:3px solid var(--help); border-radius:4px; background:var(--help-bg);
  color:var(--ink); font-size:.82rem; line-height:1.5}
.wp-sec > .wp-tipbox:first-child{margin-top:0}
.wp-drop{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:18px 12px; border:1.5px dashed var(--line);
  border-radius:8px; background:var(--paper); color:var(--muted); font-size:.84rem; text-align:center; cursor:pointer; transition:border-color .15s}
.wp-drop b{color:var(--navy)}
.wp-drop:hover,.wp-drop.over{border-color:var(--green); color:var(--green-dark)}
.wp-drop input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.wp-drop:focus-within{outline:2px solid var(--green); outline-offset:2px}
.wp-file{display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:6px}
.wp-file img{width:44px; height:44px; object-fit:contain; background:var(--paper); border-radius:4px; flex:0 0 auto}
.wp-file span{flex:1 1 auto; min-width:0; font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wp-file label,.wp-file button{border:0; background:none; color:var(--green-dark); text-decoration:underline; cursor:pointer; font:inherit; font-size:.8rem; padding:0}
.wp-editor .wp-tick{margin-top:10px}

/* names: a group per size, as in the prototype */
/* who adds them: you here, or your team on a shared list */
.wp-nwho{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.wp-nwho button{border:1px solid var(--line); background:var(--white); color:var(--navy); border-radius:999px; padding:5px 12px;
  font:inherit; font-size:.8rem; cursor:pointer; line-height:1.3}
.wp-nwho button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.wp-nwho + .wp-tipbox{margin-top:0}
/* what each print type means: the chosen one under the buttons, or all of them before one is picked */
.wp-modehelp{margin:6px 0 0; font-size:.8rem; color:var(--muted); line-height:1.4}
.wp-modelist{margin:8px 0 0; padding-left:1.1em; font-size:.8rem; color:var(--muted); line-height:1.45}
.wp-modelist li{margin:0 0 2px}
.wp-modelist b{color:var(--navy); font-weight:600}
.wp-textnote{margin-top:0}
/* each person picks their own size: one "People" tile, the size of a size tile, and a hint beside it */
.wp-teamn .wp-sizes{display:grid; grid-template-columns:repeat(6,1fr); align-items:center}
.wp-teamn .wp-teamn-hint{grid-column:2 / -1; margin:0 0 0 6px; font-size:.8rem; color:var(--muted); line-height:1.4}
@media (max-width:600px){.wp-teamn .wp-sizes{grid-template-columns:repeat(3,1fr)} .wp-teamn .wp-teamn-hint{grid-column:2 / -1}}
.wp-nhelp{font-size:.8rem; color:var(--muted); margin:0 0 10px; line-height:1.45}
.wp-ngroup + .wp-ngroup{margin-top:10px}
.wp-nghead{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 5px; font-size:.8rem}
.wp-nghead b{color:var(--navy)}
.wp-nghead span{color:var(--muted)}
#wherry-picker .wp-editor .wp-nrow{display:grid; grid-template-columns:22px minmax(0,1fr); gap:6px; align-items:center; margin-bottom:5px}
#wherry-picker .wp-editor .wp-nrow span{flex:none; text-align:right; font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums}
#wherry-picker .wp-editor .wp-nrow input{padding:7px 10px; font-size:.9rem}

/* filled boxes: a light green edge; empty ones: the attention colour */
#wherry-picker .wp-editor .wp-nrow input.is-filled{border-color:var(--ok); box-shadow:inset 3px 0 0 var(--ok); background:var(--ok-bg)}
#wherry-picker .wp-editor .wp-nrow input.is-needed{border-color:var(--warn); box-shadow:inset 3px 0 0 var(--warn)}
#wherry-picker .wp-editor .wp-nrow input:focus{box-shadow:0 0 0 2px rgba(30,122,99,.2)}

/* a note about something still needed: the attention colour rather than the help colour */
.wp-tipbox.wp-needbox{border-left-color:var(--warn); background:var(--amber-bg); color:var(--ink)}
#wherry-picker .wp-editor .wp-ncount{font-size:.78rem; margin-top:8px}
#wherry-picker .wp-editor .wp-nalso{grid-column:2; font-size:.72rem; color:var(--muted); margin-top:-2px; line-height:1.3}
.wp-editor textarea{min-height:48px}
.wp-fdd-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:6px;
  background:var(--white); color:var(--ink); padding:8px 12px; font-size:1.08rem; line-height:1.3; cursor:pointer; text-align:left}
.wp-fdd-btn:hover{border-color:var(--navy)}
.wp-fdd-btn i{flex:0 0 auto; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); margin-top:-4px}
.wp-fdd-btn[aria-expanded="true"] i{transform:rotate(-135deg); margin-top:4px}
.wp-fdd-list{margin-top:4px; border:1px solid var(--line); border-radius:6px; max-height:280px; overflow:auto; background:var(--white); padding:0 0 4px;
  box-shadow:0 6px 18px rgba(19,38,64,.1)}

/* category headings: a shaded bar in the interface font, pinned while its fonts scroll past */
.wp-fdd-g{position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:8px; font-family:Inter,-apple-system,"Segoe UI",sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--navy); background:var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 12px; margin-top:4px}
.wp-fdd-g:first-child{margin-top:0; border-top:0}
.wp-fdd-g:after{content:''; flex:1 1 auto; height:1px; background:var(--line)}

/* the fonts: indented under their heading, each in its own face */
.wp-fdd-o{display:block; width:100%; border:0; background:none; text-align:left; padding:7px 12px 7px 24px; font-size:1.12rem; color:var(--ink); cursor:pointer}
.wp-fdd-o:hover{background:var(--paper)}
.wp-fdd-o[aria-selected="true"]{background:var(--help-bg); color:var(--navy)}
.wp-editor .wp-inks{display:flex; flex-wrap:wrap; gap:8px}
.wp-editor .wp-ink{width:28px; height:28px; border-radius:50%; border:1px solid rgba(0,0,0,.25); padding:0; margin:0}

/* outline swatches are rings; "none" is a struck-through circle */
.wp-editor .wp-ink.wp-ring{background:#fff !important; border:4px solid var(--c)}
.wp-editor .wp-ink.wp-none{background:#fff; color:var(--muted); font-size:1rem; line-height:1; border:1px dashed var(--line)}
.wp-seg2{display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.wp-seg2 button{border:0; background:var(--white); font:inherit; font-size:.84rem; padding:7px 16px; cursor:pointer; color:var(--ink)}
.wp-seg2 button + button{border-left:1px solid var(--line)}
.wp-seg2 button[aria-pressed="true"]{background:var(--navy); color:var(--paper)}
.wp-shapes{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
.wp-shapes button{display:flex; flex-direction:column; align-items:center; gap:5px; border:1px solid var(--line); background:var(--white);
  border-radius:6px; padding:6px 2px; font:inherit; font-size:.7rem; color:var(--ink); cursor:pointer}
.wp-shapes button svg{width:34px; height:17px; color:var(--navy)}
.wp-shapes button:hover{border-color:var(--navy)}
.wp-shapes button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.wp-shapes button[aria-pressed="true"] svg{color:var(--paper)}
.wp-seg2 button:focus-visible,.wp-shapes button:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-editor .wp-ink[aria-pressed="true"]{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--navy)}
.wp-sizehead{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.wp-sizeout{font-size:.84rem; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}
.wp-range{width:100%; accent-color:var(--green); margin:0}
.wp-pos{display:flex; flex-wrap:wrap; align-items:center; gap:5px}
.wp-pos button{width:34px; height:34px; border:1px solid var(--line); border-radius:6px; background:var(--white); color:var(--navy);
  font:inherit; font-size:.95rem; cursor:pointer; padding:0}
.wp-pos button.wide{width:auto; padding:0 12px; font-size:.8rem}
.wp-pos button:hover{border-color:var(--navy)}
.wp-pos span{font-size:.78rem; color:var(--muted); margin-left:4px}

/* the area being edited breathes; its design gets a dashed outline and a move mark */
@keyframes wpEditPulse{50%{fill-opacity:.24}}
.wp-zone.is-editing rect{animation:wpEditPulse 1.8s ease-in-out infinite}
.wp-dsel{fill:none; stroke:var(--help); stroke-width:1.2; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; pointer-events:none}
.wp-dmove{pointer-events:none}
.wp-dmove circle{fill:var(--help)}
.wp-dmove path{fill:none; stroke:#fff; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:reduce){.wp-zone.is-editing rect{animation:none}}

/* garment cards with a Photos button over the picture */
.wp-gcard{position:relative; display:flex; min-width:0}
.wp-gcard .wp-garment{width:100%}
.wp-gphotos{position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:4px; border:0; border-radius:999px;
  background:rgba(19,38,64,.82); color:#fff; font:inherit; font-size:.7rem; font-weight:600; padding:4px 9px 4px 7px; cursor:zoom-in}
.wp-gphotos svg{width:14px; height:14px}
.wp-gphotos:hover{background:var(--navy)}
.wp-gphotos:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-garments{grid-template-columns:repeat(auto-fill,minmax(max(200px,calc((100% - (var(--wp-cols,4) - 1) * 18px) / var(--wp-cols,4))),1fr)); gap:18px}
.wp-shopbuy-main{margin-top:auto; padding:9px 10px; background:var(--green); color:#fff; border-color:var(--green)}
.wp-shopbuy-main:hover{background:var(--green-dark); color:#fff}
.wp-plaincard .wp-garment{margin-bottom:10px}
.wp-gcard{flex-direction:column; border:1px solid var(--line); border-radius:10px; background:var(--white); padding:10px; transition:border-color .15s, box-shadow .15s}
.wp-gcard:hover{border-color:var(--navy)}
.wp-gcard.is-on{border-color:var(--green); box-shadow:0 0 0 1px var(--green)}
#wherry-picker .wp-gcard .wp-garment{border:0; background:none; padding:0; color:var(--ink); flex:none; min-width:0}
#wherry-picker .wp-gcard .wp-garment[aria-pressed="true"]{background:none; color:var(--ink)}
.wp-gcard .wp-garment img{border-radius:6px; margin-bottom:10px}
.wp-gcard .wp-garment span{padding:0; font-size:.92rem}
.wp-gcard .wp-garment small{padding:0; font-size:.78rem}
.wp-gcard.is-on::after{content:'\2713'; position:absolute; top:-9px; right:-9px; z-index:1; width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; box-shadow:0 1px 3px rgba(0,0,0,.25); pointer-events:none}
.wp-gdots{display:flex; align-items:center; gap:4px; margin-top:8px; font-style:normal}
.wp-gdots b{width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.wp-gdots em{font-style:normal; font-size:.72rem; color:var(--muted); margin-left:2px}
#wherry-picker .wp-gbtns{position:static; flex-direction:row; justify-content:flex-start; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
#wherry-picker .wp-gbtns .wp-gphotos{position:static; background:var(--paper); color:var(--navy); cursor:pointer}
#wherry-picker .wp-gbtns .wp-gphotos:hover{background:var(--line)}

/* the shop layout: one view at a time (data-view on #wherry-picker) */
#wherry-picker.wp-shop .wp-intro{display:none}
#wherry-picker.wp-shop[data-view="shop"] .wp-card2,#wherry-picker.wp-shop[data-view="shop"] .wp-grid,#wherry-picker.wp-shop[data-view="shop"] #wpEstimate,
#wherry-picker.wp-shop[data-view="shop"] #wpSend,#wherry-picker.wp-shop[data-view="shop"] #wpShopHead,#wherry-picker.wp-shop[data-view="shop"] #wpEnqHead,
#wherry-picker.wp-shop[data-view="custom"] .wp-card1,#wherry-picker.wp-shop[data-view="custom"] #wpEstimate,#wherry-picker.wp-shop[data-view="custom"] #wpSend,
#wherry-picker.wp-shop[data-view="custom"] #wpEnqHead,#wherry-picker.wp-shop[data-view="custom"] #wpAdd,#wherry-picker.wp-shop[data-view="custom"] #wpGo,
#wherry-picker.wp-shop[data-view="custom"] .wp-finish-note,#wherry-picker.wp-shop[data-view="custom"] #wpAnother,#wherry-picker.wp-shop[data-view="custom"] #wpAnotherAsk,
#wherry-picker.wp-shop[data-view="enquiry"] .wp-card1,#wherry-picker.wp-shop[data-view="enquiry"] .wp-card2,#wherry-picker.wp-shop[data-view="enquiry"] .wp-grid,
#wherry-picker.wp-shop[data-view="enquiry"] #wpShopHead{display:none !important}
#wherry-picker.wp-shop .wp-gcard.is-on{border-color:var(--line); box-shadow:none}
#wherry-picker.wp-shop .wp-gcard.is-on::after{content:none}
.wp-shopgo{margin-top:10px; width:100%; border:0; border-radius:8px; background:var(--green); color:#fff; font:inherit; font-weight:700; font-size:.86rem; padding:9px 10px; cursor:pointer}
.wp-shopgo:hover{background:var(--green-dark)}
.wp-shopgo:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.wp-shopbuy{display:block; margin-top:6px; width:100%; box-sizing:border-box; border:1.5px solid var(--green); border-radius:8px; background:var(--white); color:var(--green);
  font-weight:700; font-size:.86rem; padding:7px 10px; text-align:center; text-decoration:none}
.wp-shopbuy:hover{background:#E8F3EF}
.wp-shopbuy:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.wp-shopbadge{position:absolute; top:-9px; left:12px; z-index:1; background:var(--green); color:#fff; font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.wp-shophead{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:0 0 14px}
.wp-shopback{border:0; background:none; color:var(--green); font:inherit; font-weight:700; padding:6px 0; cursor:pointer; flex-basis:100%; text-align:left}
.wp-shopback:hover{text-decoration:underline}
.wp-shopname{flex:1; min-width:0}
.wp-shopname h2{margin:0; font-size:1.3rem; line-height:1.2; color:var(--navy)}
.wp-shopname p{margin:2px 0 0; color:var(--muted); font-size:.86rem}
.wp-shopmore{display:flex; gap:6px; flex-wrap:wrap}
#wherry-picker .wp-shopmore .wp-gphotos{position:static; background:var(--paper); color:var(--navy); cursor:pointer}
.wp-shopbar{position:sticky; bottom:0; z-index:40; display:flex; align-items:center; gap:10px; margin:16px -4px 0; padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background:var(--navy); color:#fff; border-radius:12px 12px 0 0; box-shadow:0 -6px 20px rgba(19,38,64,.18)}
.wp-sbtxt{flex:1; min-width:0; font-size:.84rem; line-height:1.35}
.wp-sbtxt strong{display:block; font-size:.98rem}
.wp-sbbtn{flex:none; border:0; border-radius:8px; background:#fff; color:var(--navy); font:inherit; font-weight:700; font-size:.88rem; padding:10px 14px; cursor:pointer}
.wp-sbbtn:hover{background:#E6ECEA}
.wp-sbbtn[aria-disabled="true"]{opacity:.55}
.wp-sbbtn.wp-sbalt{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.wp-sbbtn:focus-visible{outline:2px solid #F0B429; outline-offset:2px}
.wp-shoptoast{position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:100000; background:var(--green); color:#fff; font-weight:600; font-size:.9rem;
  padding:10px 16px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.2); max-width:calc(100% - 32px)}

/* card badges: amber while being set up, navy once in the enquiry, with the card border to match */
.wp-shopbadge.is-live{background:#F0B429; color:#3B2A05}
.wp-shopbadge.is-in{background:var(--navy); color:#fff}
#wherry-picker.wp-shop .wp-gcard.wp-card-live{border-color:#F0B429; box-shadow:0 0 0 2px #F0B429}
#wherry-picker.wp-shop .wp-gcard.wp-card-in{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy)}

/* Customise heading: photo, thumbnails, name */
#wpShopHead{display:grid; grid-template-columns:auto 1fr; align-items:start; gap:6px 16px}
#wpShopHead .wp-shopback{grid-column:1 / -1}
.wp-shopimg{width:200px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--paper); overflow:hidden; cursor:zoom-in}
.wp-shopimg img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover}
.wp-shopthumbs{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.wp-shopthumbs button{width:64px; height:76px; padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper); cursor:zoom-in; font:inherit; font-size:.75rem; color:var(--navy); font-weight:700}
.wp-shopthumbs img{display:block; width:100%; height:100%; object-fit:cover}
@media (max-width:600px){.wp-shopimg{width:150px} .wp-shopthumbs button{width:52px; height:62px}}

/* step 1 first: steps 2 and 3 wait, greyed, until a colour and a size are chosen */
#wherry-picker.wp-needbasics .wp-card2{border-color:var(--green); box-shadow:0 0 0 2px var(--green)}
#wherry-picker.wp-needbasics .wp-grid{opacity:.4; filter:grayscale(1); pointer-events:none; position:relative}
#wherry-picker.wp-needbasics .wp-grid::before{content:'Choose a colour and how many of each size first'; position:absolute; z-index:5; left:50%; top:140px; transform:translateX(-50%);
  background:var(--navy); color:#fff; font-weight:700; font-size:.88rem; padding:8px 14px; border-radius:999px; white-space:nowrap; filter:none}
#wherry-picker .wp-grid{transition:opacity .25s, filter .25s}

/* "Add another product" under Your estimate */
.wp-shopmorebtn{display:none; width:100%; margin:6px 0 12px; border:1.5px dashed var(--green); border-radius:10px; background:transparent; color:var(--green);
  font:inherit; font-weight:700; padding:11px; cursor:pointer}
.wp-shopmorebtn:hover{background:var(--paper)}
#wherry-picker.wp-shop .wp-shopmorebtn{display:block}

/* the choice after a set goes in */
.wp-shopdone{position:fixed; inset:0; z-index:99999; background:rgba(12,25,41,.5); display:flex; align-items:center; justify-content:center; padding:16px}
.wp-shopdone[hidden]{display:none}
.wp-sddialog{background:#fff; color:var(--ink); border-radius:14px; padding:22px 20px 16px; width:min(380px,100%); text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3)}
.wp-sdtick{width:46px; height:46px; margin:0 auto 8px; color:#fff !important; line-height:1; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800}
.wp-sddialog{position:relative}
.wp-sdx{position:absolute; top:10px; right:10px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:1.5rem; line-height:1; cursor:pointer}
.wp-sdx:hover{background:var(--paper); color:var(--navy)}
.wp-sdx:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-sddialog h3{margin:0 0 4px; font-size:1.15rem; color:var(--navy)}
.wp-sddialog > p{margin:0 0 16px; color:var(--muted); font-size:.9rem}
.wp-sdbtn{display:block; width:100%; margin:0 0 8px; border:0; border-radius:10px; background:var(--green); color:#fff; font:inherit; font-weight:700; padding:12px; cursor:pointer}
.wp-sdbtn:hover{background:var(--green-dark)}
.wp-sdbtn.wp-sdalt{background:var(--paper); color:var(--navy)}
.wp-sdbtn.wp-sdalt:hover{background:var(--line)}
.wp-sdlink{border:0; background:none; color:var(--green); font:inherit; font-weight:600; font-size:.88rem; padding:6px; cursor:pointer; text-decoration:underline}
.wp-sdbtn:focus-visible,.wp-sdlink:focus-visible,.wp-shopmorebtn:focus-visible{outline:2px solid var(--navy); outline-offset:2px}

/* "‹ All products" as a proper button */
#wherry-picker .wp-shopback{flex-basis:auto; justify-self:start; display:inline-flex; align-items:center; gap:4px; border:1.5px solid var(--green); border-radius:999px;
  padding:7px 14px 7px 10px; background:var(--white); color:var(--green); font-size:.9rem}
#wherry-picker .wp-shopback:hover{background:var(--green); color:#fff; text-decoration:none}
.wp-enqhead .wp-shopback{margin-bottom:4px}
#wpEnqHead{display:grid; grid-template-columns:1fr; gap:6px}

/* plain garments: the choice in amber, then the next step right there */

/* 3D: 360 badge on the model and on its switch */
.wp-3d360{position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:rgba(19,38,64,.85); color:#fff;
  font-size:.75rem; font-weight:700; padding:5px 10px 5px 7px; border-radius:999px; pointer-events:none}
.wp-3d360 svg{width:18px; height:18px}
.wp-360tag{display:inline-block; margin-left:4px; font-size:.68rem; font-weight:800; background:#F0B429; color:#3B2A05; border-radius:999px; padding:1px 6px; vertical-align:1px}
@media (max-width:600px){.wp-360tag{display:none}}

/* the bar's Add, once the set is ready */
.wp-sbbtn.is-ready{background:#F0B429; color:#3B2A05}
.wp-sbbtn.is-ready:hover{background:#FFC94D}
@media (prefers-reduced-motion:no-preference){.wp-sbbtn.is-ready{animation:wpReady 1.6s ease-in-out 2}
  @keyframes wpReady{50%{box-shadow:0 0 0 6px rgba(240,180,41,.35)}}}

/* search and sort above the chips */
.wp-gtools{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 10px}
.wp-gsearch{flex:1 1 220px; max-width:360px; position:relative}
.wp-gsearch input{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:999px; padding:9px 14px 9px 36px; font:inherit; font-size:.9rem;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px center / 16px}
.wp-gsearch input:focus{outline:2px solid var(--green); outline-offset:1px; border-color:var(--green)}
.wp-gsort{display:flex; align-items:center; gap:6px; margin-left:auto; font-size:.84rem; color:var(--muted)}

/* All / Adults / Kids: one pill split in three */
.wp-gage{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--white)}
.wp-gage button{border:0; background:none; font:inherit; font-size:.86rem; padding:8px 14px; color:var(--ink); cursor:pointer}
.wp-gage button + button{border-left:1px solid var(--line)}
.wp-gage button[aria-pressed="true"]{background:var(--navy); color:var(--paper)}
.wp-gage button:focus-visible{outline:2px solid var(--green); outline-offset:-2px}
.wp-gsort select{border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; font-size:.86rem; background:var(--white); color:var(--ink)}
.wp-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wp-gnone{margin:8px 0 14px; color:var(--muted)}
@media (max-width:600px){.wp-gsearch{max-width:none; flex-basis:100%} .wp-gsort{margin-left:0}}

/* photo arrows on the cards */
.wp-gnav{position:absolute; left:10px; right:10px; top:10px; aspect-ratio:3/4; pointer-events:none; z-index:1}
.wp-gnav button{pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; background:rgba(255,255,255,.5); color:var(--navy); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.wp-gnav button svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.wp-gnav button:hover{background:rgba(255,255,255,.9)}

/* shop cards: the photo zooms, colour dots pick the colour shown; only Customise opens the product */
#wherry-picker.wp-shop .wp-gcard .wp-garment{cursor:default}
#wherry-picker.wp-shop .wp-gcard .wp-garment img{cursor:zoom-in}
#wherry-picker.wp-shop .wp-gdots b{cursor:pointer; transition:transform .12s}
#wherry-picker.wp-shop .wp-gdots b:hover{transform:scale(1.25)}
#wherry-picker.wp-shop .wp-gdots b.on{box-shadow:0 0 0 2px var(--white), 0 0 0 3.5px var(--navy)}

/* the plain choice under the sizes */
.wp-feenote{margin:8px 0 0; font-size:.85rem}

/* the product grid lines up with the header (logo to basket): the theme's container width, 1290px on Blocksy; the designer itself stays at 1120px */
#wherry-picker[data-view="shop"]{max-width:var(--theme-normal-container-max-width,1290px); width:var(--theme-container-width,100%)}
.wp-enqvsbasket{margin:6px 0 0; font-size:.85rem; color:var(--muted)}

/* the note for clubs, above the shop */
.wp-clubnote{position:relative; margin:0 0 16px; padding:16px 48px 16px 18px; border-radius:10px; background:rgba(30,122,99,.1); color:var(--ink); font-size:.92rem; line-height:1.55}
.wp-clubnote strong{display:block; color:var(--navy); font-size:1rem; margin-bottom:2px}
.wp-clubnote a{color:var(--green-dark); font-weight:700}
.wp-clubx{position:absolute; top:8px; right:10px; border:0; background:none; font-size:1.4rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px 6px}

/* the "are you sure?" card */
.wp-askwrap{position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(12,25,41,.45)}
.wp-askwrap[hidden]{display:none}
.wp-askcard{position:relative; width:100%; max-width:420px; background:var(--white); border-radius:12px; padding:24px 22px 20px;
  box-shadow:0 18px 50px rgba(12,25,41,.3); display:flex; flex-wrap:wrap; gap:10px; color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.wp-askcard{animation:wpAskIn .16s ease-out}
  @keyframes wpAskIn{from{transform:translateY(8px); opacity:0}}}
.wp-askcard .wp-sbtxt{flex:1 1 100%; font-size:.92rem; color:var(--muted); line-height:1.5; margin:0 0 8px; padding-right:22px}
.wp-askcard .wp-sbtxt strong{display:block; font-size:1.08rem; color:var(--navy); margin-bottom:4px}
.wp-askcard .wp-sbbtn{flex:1 1 140px; justify-content:center; border-radius:999px; padding:11px 16px; font:inherit; font-weight:700;
  font-size:.92rem; cursor:pointer; border:2px solid var(--navy); background:var(--navy); color:var(--paper)}
.wp-askcard .wp-sbbtn.wp-sbalt{background:var(--white); color:var(--navy)}
.wp-askcard .wp-sbbtn.wp-sbdanger{background:#B3402E; border-color:#B3402E; color:#fff}
.wp-askcard .wp-sbbtn:hover{filter:brightness(1.08)}
.wp-askcard .wp-sbbtn:focus-visible{outline:3px solid var(--green); outline-offset:2px}
.wp-askx{position:absolute; top:8px; right:10px; border:0; background:none; font-size:1.5rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px 6px}
.wp-askx:hover{color:var(--navy)}
.wp-enqvsbasket a{color:var(--green); font-weight:700; text-decoration:none; white-space:nowrap}
.wp-align{margin-top:8px}
.wp-align button{display:inline-flex; align-items:center; justify-content:center; gap:6px}
.wp-alico{width:16px; height:16px; flex:none}
.wp-addtext2{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px}
.wp-addtext2-btn{border:1.5px dashed var(--green); border-radius:999px; background:transparent; color:var(--green); font:inherit; font-weight:700; padding:7px 14px; cursor:pointer}
.wp-addtext2-btn:hover{background:#E8F3EF}
.wp-addtext2 small{color:var(--muted); font-size:.78rem}
.wp-text2{border-top:1px solid var(--line); padding-top:12px}
.wp-text2 textarea{width:100%}
.wp-gacc{align-self:center; margin-right:auto; font-weight:700; color:var(--green); text-decoration:none; white-space:nowrap}
.wp-gacc:hover{text-decoration:underline}

/* the order card on Customise (shop layout): a sentence, a bar with a mark per price step, a grey line */
#wherry-picker .wp-ordcard{display:none}
#wherry-picker.wp-shop[data-view="custom"] #wpOrderCard:not([hidden]), #wherry-picker.wp-shop[data-view="enquiry"] #wpOrderCardE:not([hidden]){display:block; margin:0 0 14px; padding:14px 18px 12px; border:1px solid var(--line); border-radius:12px; background:var(--white)}
.wp-oc-msg{margin:0; font-size:.95rem; color:var(--navy)}
.wp-oc-msg b{font-weight:700}
.wp-oc-bar{position:relative; height:8px; border-radius:4px; background:var(--paper); margin:24px 4px 28px}
.wp-oc-fill{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--green); transition:width .25s}
.wp-oc-mark{position:absolute; top:-4px; width:2px; height:16px; background:#C9D1CE; transform:translateX(-1px)}
.wp-oc-mark.on{background:var(--green)}
.wp-oc-at{position:absolute; top:-21px; transform:translateX(-50%); font-size:.72rem; color:var(--muted, #5c6b7a); white-space:nowrap}
.wp-oc-lbl{position:absolute; top:16px; transform:translateX(-50%); font-size:.72rem; color:var(--muted, #5c6b7a); white-space:nowrap}
.wp-oc-lbl.on{color:var(--green); font-weight:700}
.wp-oc-at.is-end, .wp-oc-lbl.is-end{transform:translateX(-100%)}
.wp-oc-sub{margin:0; font-size:.78rem; color:var(--muted, #5c6b7a)}
@media (max-width:600px){.wp-oc-lbl{font-size:.66rem}}
.wp-artnote{margin:8px 0 4px; font-size:.85rem}
  color:var(--green); font:inherit; font-weight:700; padding:8px 14px; cursor:pointer; text-align:center}
.wp-plainundo{border:0; background:none; color:var(--green); font:inherit; font-weight:600; text-decoration:underline; padding:4px 0; cursor:pointer}

/* Customise's bar: back to the products */
.wp-sbbtn.wp-sbback{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); order:-1}
.wp-sbbtn.wp-sbback:hover{background:rgba(255,255,255,.12)}
@media (max-width:600px){.wp-sbbtn.wp-sbback{order:1; flex:0 0 auto} .wp-shopbar [data-shop="add"]{order:2}}
.wp-gnav button:focus-visible{outline:2px solid var(--green); outline-offset:1px}
.wp-gprev{left:6px} .wp-gnext{right:6px}
.wp-gdotsn{position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:4px}
.wp-gdotsn i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.wp-gdotsn i.on{background:#fff; width:14px; border-radius:3px}
@media (max-width:600px){.wp-gnav{left:8px; right:8px; top:8px}}

/* the × on "Being set up", and the bar's Discard */
.wp-shopdel{position:absolute; top:-10px; left:118px; z-index:2; width:22px; height:22px; border-radius:50%; border:0; background:#B42318; color:#fff;
  font-size:.95rem; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.wp-shopdel:hover{background:#912018}
.wp-shopdel[hidden]{display:none}

/* the pencil on "In your enquiry", and its choice of sets */
.wp-shopedit{position:absolute; top:-10px; left:130px; z-index:2; width:24px; height:24px; padding:0; border-radius:50%; border:0; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.wp-shopedit svg{width:13px; height:13px}
.wp-shopedit:hover{background:var(--green)}
.wp-shopedit:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-shopedit[hidden]{display:none}
.wp-shopbin{display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0}
.wp-shopbin svg{width:13px; height:13px}
.wp-shopbin[hidden]{display:none}
.wp-shopeditmenu{position:absolute; top:20px; left:12px; z-index:5; min-width:180px; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--white); box-shadow:0 6px 18px rgba(0,0,0,.15)}
.wp-shopeditmenu span{display:block; padding:4px 8px; font-size:.75rem; color:var(--muted, #5c6b7a)}
.wp-shopeditmenu button{display:block; width:100%; text-align:left; border:0; background:none; padding:7px 8px; border-radius:6px; font:inherit; font-size:.88rem; color:var(--navy); cursor:pointer}
.wp-shopeditmenu button:hover, .wp-shopeditmenu button:focus-visible{background:var(--paper)}
.wp-sbbtn.wp-sbdanger{background:#B42318; color:#fff}
.wp-sbbtn.wp-sbdanger:hover{background:#912018}

/* the shop bar's main button */
.wp-sbbtn.wp-sbgo{background:var(--green); color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.wp-sbbtn.wp-sbgo:hover{background:var(--green-dark)}
#wherry-picker.wp-shop .wp-lhead{flex-wrap:wrap; row-gap:8px}
#wherry-picker.wp-shop .wp-setbtns{flex:1 1 100%; flex-wrap:wrap; gap:6px}
@media (max-width:600px){.wp-shopbar{flex-wrap:wrap} .wp-sbtxt{flex-basis:100%} .wp-sbbtn{flex:1}}

/* phones: two cards a row instead of one row to swipe */
@media (max-width:600px){#wherry-picker .wp-garments,#wherry-picker .wp-garments.is-many{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; overflow:visible}
  #wherry-picker .wp-garments.is-many .wp-gcard{flex:none} .wp-gcard{padding:8px}}

/* colour swatches */
.wp-swatches{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.wp-swatch{position:relative; width:40px; height:40px; padding:3px; border:2px solid transparent; border-radius:50%; background:none; cursor:pointer}
.wp-swatch span{display:block; width:100%; height:100%; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.wp-swatch.is-light span{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.wp-swatch:hover{border-color:var(--line)}
.wp-swatch.is-soldout{cursor:not-allowed}
.wp-swatch.is-soldout span{opacity:.35}
.wp-swatch.is-soldout::after{content:''; position:absolute; left:50%; top:3px; bottom:3px; width:2px; background:var(--navy); transform:translateX(-50%) rotate(45deg); pointer-events:none}
.wp-size.is-out{opacity:.4}
.wp-size.is-out label{text-decoration:line-through}
.wp-swatch[aria-pressed="true"]{border-color:var(--navy)}
.wp-swatch:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.wp-swatch em{display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--navy); color:var(--paper); font-style:normal; font-size:.72rem; padding:3px 8px; border-radius:4px; z-index:20; pointer-events:none}
.wp-swatch:hover em,.wp-swatch:focus-visible em{display:block}
.wp-swatch-tbc{border:1px dashed var(--line); background:none; border-radius:999px; font:inherit; font-size:.76rem; color:var(--muted);
  padding:6px 12px; cursor:pointer}
.wp-swatch-tbc[aria-pressed="true"]{border-style:solid; border-color:var(--navy); color:var(--navy)}
.wp-colour-name{flex:1 0 100%; margin:0; font-size:.84rem; font-weight:600; color:var(--navy)}
.wp-colour-name.is-unset{color:var(--warn); font-weight:500}

/* moving a design */
.wp-movehint{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:.78rem; color:var(--ink); margin:8px 0 0}
.wp-nudge{display:inline-flex; gap:4px}
.wp-nudge button{min-width:32px; height:30px; border:1px solid var(--line); border-radius:4px; background:var(--white); color:var(--navy);
  font:inherit; font-size:.9rem; cursor:pointer; padding:0 8px}
.wp-nudge button:hover{border-color:var(--navy)}
.wp-nudge button:focus-visible{outline:2px solid var(--green); outline-offset:1px}

/* someone dragging the preview photo is pointed to the drawing */
.wp-toast{position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:10; background:var(--help); color:var(--help-ink);
  font-size:.8rem; font-weight:600; padding:7px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.2); white-space:nowrap; pointer-events:none}
.wp-models{position:relative}
.wp-views.wp-flash{animation:wpShowGlow .8s ease-in-out 2}

/* the "kept from earlier" banner's button */
.wp-banner button{margin-left:10px; border:1px solid currentColor; background:none; color:inherit; font:inherit; font-size:.8rem;
  border-radius:999px; padding:2px 10px; cursor:pointer}

/* "On request" tiles in step 1, their form, and their cards in the estimate */
.wp-rqtile{position:relative}
.wp-rqph{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:3/4; border-radius:4px; margin-bottom:6px;
  background:var(--paper); color:var(--muted); font-style:normal; font-size:2rem; font-weight:600}
.wp-rqbadge{position:absolute; top:10px; left:10px; font-style:normal; font-size:.66rem; font-weight:600; letter-spacing:.02em;
  background:var(--amber-bg); color:var(--amber); border-radius:999px; padding:2px 8px}
html.wp-noscroll{overflow:hidden}
.wp-rqmodal{position:fixed; inset:0; z-index:99990; background:rgba(12,25,41,.6); display:flex; align-items:center; justify-content:center; padding:16px}
.wp-rqmodal[hidden]{display:none}
.wp-rqdialog{position:relative; width:min(560px,100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--white);
  border-radius:8px; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.3)}
.wp-rqhead{display:flex; gap:14px; align-items:flex-start; padding-right:24px}
.wp-rqhead img{width:96px; aspect-ratio:3/4; object-fit:cover; border-radius:6px; flex:0 0 auto}
.wp-rqhead h3{margin:0; font-size:1.15rem; color:var(--navy)}
.wp-rqtag{display:inline-block; margin:0 0 4px; font-size:.68rem; font-weight:600; background:var(--amber-bg); color:var(--amber); border-radius:999px; padding:2px 8px}
.wp-rqtext{margin:2px 0 0; font-size:.85rem; color:var(--muted)}
.wp-rqprice{margin:6px 0 0; font-size:.85rem; font-weight:600; color:var(--navy)}
.wp-rqnote{margin:14px 0 4px; padding:10px 12px; border-radius:6px; background:var(--paper); font-size:.82rem}
.wp-rqf{display:block; margin-top:12px}
.wp-rqf > span{display:block; font-size:.76rem; color:var(--muted); margin-bottom:5px}
.wp-rqf input[type=text],.wp-rqf textarea{width:100%; padding:8px 10px; font:inherit; font-size:.9rem; border:1px solid var(--line); border-radius:4px; color:var(--ink)}
.wp-rqf input[type=text]:focus,.wp-rqf textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 2px rgba(30,122,99,.16)}
.wp-rqpos{display:flex; flex-wrap:wrap; gap:6px}
.wp-rqpos .wp-optbtn{flex:0 1 auto; min-width:0; padding:6px 10px; font-size:.8rem}
.wp-rqhint{display:block; margin-top:5px; font-size:.74rem; color:var(--muted)}
.wp-rqerr{margin:12px 0 0; padding:8px 10px; border-radius:4px; background:var(--amber-bg); color:var(--amber); font-size:.84rem}
.wp-rqbtns{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.wp-btn.wp-rqcancel{background:var(--white); color:var(--navy)}
.wp-btn.wp-rqcancel:hover{background:var(--paper); color:var(--navy)}
.wp-setn.wp-rqn{background:var(--amber-bg); color:var(--amber)}
.wp-rqdesc{margin:12px 0 0; font-size:.85rem; line-height:1.55; white-space:pre-line}

/* a design for each print area picked, and other images */
.wp-rqdes,.wp-rqfiles{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px}
.wp-rqdes:empty,.wp-rqfiles:empty{display:none}
.wp-rqdes li{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--paper)}
.wp-rqdes li > b{font-size:.84rem; color:var(--navy); margin-right:auto}
.wp-rqdes li > small{font-size:.74rem; color:var(--muted)}
.wp-rqdadd,.wp-rqup{display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:.8rem; font-weight:600; color:var(--green-dark);
  border:1px dashed var(--green); border-radius:4px; padding:5px 10px; background:var(--white)}
.wp-rqdadd:hover,.wp-rqup:hover{background:rgba(30,122,99,.08)}
.wp-rqdadd input,.wp-rqup input{position:absolute; width:1px; height:1px; opacity:0}
.wp-rqdadd:focus-within,.wp-rqup:focus-within{outline:2px solid var(--green); outline-offset:2px}
.wp-rqup{display:flex; flex-wrap:wrap}
.wp-rqup[hidden]{display:none}
.wp-rqup small{font-weight:400; color:var(--muted)}
.wp-rqdfile,.wp-rqfiles li{display:flex; align-items:center; gap:8px; min-width:0}
.wp-rqfiles li{padding:5px 8px; border:1px solid var(--line); border-radius:6px}
.wp-rqdfile img,.wp-rqfiles img,.wp-rqext{width:34px; height:34px; object-fit:contain; border-radius:4px; background:var(--white); flex:0 0 auto;
  border:1px solid var(--line)}
.wp-rqext{display:flex; align-items:center; justify-content:center; font-style:normal; font-size:.6rem; font-weight:700; color:var(--muted)}
.wp-rqfn{font-size:.8rem; overflow-wrap:anywhere; min-width:0}
.wp-rqfn em{display:block; font-style:normal; color:var(--amber)}
.wp-rqdfile button,.wp-rqfiles button{border:0; background:none; font:inherit; font-size:1.1rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px}
.wp-rqdfile button:hover,.wp-rqfiles button:hover{color:var(--navy)}

/* the little T-shirt on each print position button */
.wp-rqpos .wp-optbtn{gap:6px}
.wp-posico{width:28px; height:28px; flex:0 0 auto; color:var(--muted)}
.wp-posico-a{fill:var(--green)}
.wp-optbtn[aria-pressed="true"] .wp-posico{color:var(--paper)}
.wp-optbtn[aria-pressed="true"] .wp-posico-a{fill:#7FD6BD}