/* ═══════════════════════════════════════════════════════════════════════
   WV Design Your Own — editor styles
   Ported from wv-dyo-ui-reference.html (plugin style block).
   Rules:
     · Every selector prefixed with #builder (the shortcode's wrapper id) and
       scoped under .wv-dyo — theme styles can't leak in, ours can't leak out
     · Root has NO margin, NO padding, NO width constraint
     · NO font-family anywhere — type is inherited from the theme
     · All color tokens prefixed --wv- so they can't collide with theme vars
     · font-size is set on controls only, in relative terms
   ═══════════════════════════════════════════════════════════════════════ */
#builder .wv-dyo{
  /* color tokens — the plugin's own, theme-independent */
  --wv-bg:#0B0A10;
  --wv-panel:#14121C;
  --wv-panel-2:#1B1826;
  --wv-line:#2A2637;
  --wv-line-2:#3A3450;
  --wv-muted:#8F88A6;
  --wv-uv:#FF2FB9;      /* primary accent */
  --wv-scan:#35E6E0;    /* secondary accent — chromatic pair */
  --wv-warn:#FFB454;
  --wv-radius:3px;

  display:block;
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#builder .wv-dyo *,#builder .wv-dyo *::before,#builder .wv-dyo *::after{box-sizing:border-box}

/* ── step sections ── */
#builder .wv-dyo__step{border-top:1px solid var(--wv-line);padding:32px 0}
#builder .wv-dyo__step:first-child{border-top:0;padding-top:0}
#builder .wv-dyo__step:last-child{padding-bottom:0}
#builder .wv-dyo__stephead{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
#builder .wv-dyo__stepnum{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wv-uv);
  border:1px solid var(--wv-uv);padding:3px 9px;border-radius:99px}
#builder .wv-dyo__steptitle{font-size:1.45rem;font-weight:800;margin:0;line-height:1.05}
#builder .wv-dyo__stephint{color:var(--wv-muted);font-size:.85rem;margin-left:auto}

@media screen and (max-width:690px) {
  #builder .wv-dyo__stephead {flex-wrap: nowrap;flex-direction: row;}
  #builder .wv-dyo__stephint {display: none;}
}

/* ── step 1: garment / color / size ── */
#builder .wv-dyo__garments{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
#builder .wv-dyo__garment{display:flex;align-items:center;gap:14px;background:var(--wv-panel);
  border:1px solid var(--wv-line);border-radius:var(--wv-radius);padding:14px 16px;cursor:pointer;
  text-align:left;color:inherit;font:inherit;transition:border-color .16s,background .16s}
#builder .wv-dyo__garment:hover{border-color:var(--wv-line-2);background:var(--wv-panel-2)}
#builder .wv-dyo__garment[aria-pressed="true"]{border-color:var(--wv-uv);background:var(--wv-panel-2)}
#builder .wv-dyo__garment img{height:100px;width:auto;flex:none;opacity:.85;object-fit:contain}
#builder .wv-dyo__gname{display:block;font-weight:700;font-size:.95rem}
#builder .wv-dyo__gprice{display:block;color:var(--wv-muted);font-size:.85rem}
#builder .wv-dyo__optrow{display:flex;gap:34px;flex-wrap:wrap;margin-top:22px}
#builder .wv-dyo__optlabel{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wv-muted);margin-bottom:10px}
#builder .wv-dyo__swatches{display:flex;gap:9px}
#builder .wv-dyo__swatch{user-select:none;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--wv-line-2);padding:0}
#builder .wv-dyo__swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--wv-bg),0 0 0 3px var(--wv-uv)}
#builder .wv-dyo__sizes{display:flex;gap:7px;flex-wrap:wrap}
#builder .wv-dyo__size{min-width:44px;padding:8px 4px;text-align:center;user-select:none;background:var(--wv-panel);border:1px solid var(--wv-line);
  border-radius:var(--wv-radius);cursor:pointer;color:var(--wv-muted);font:inherit;font-size:.85rem}
#builder .wv-dyo__size[aria-pressed="true"]{border-color:var(--wv-uv);color:inherit}

@media screen and (max-width:690px) {
  #builder .wv-dyo__swatches {padding-left: 5px;}
}

/* ── step 2: two columns — mockup left, controls right ── */
#builder .wv-dyo__editor{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
#builder .wv-dyo__stages{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#builder .wv-dyo__sidetabs{display:none;margin-bottom:12px;border:1px solid var(--wv-line);
  border-radius:var(--wv-radius);overflow:hidden}
#builder .wv-dyo__sidetab{flex:1;padding:11px;text-align:center;user-select:none;background:var(--wv-panel);border:0;color:var(--wv-muted);
  font:inherit;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
#builder .wv-dyo__sidetab[aria-pressed="true"]{background:var(--wv-panel-2);color:inherit}
#builder .wv-dyo__stage{position:relative;background:var(--wv-panel);border:1px solid var(--wv-line);
  border-radius:var(--wv-radius);overflow:hidden;padding:25px}
#builder .wv-dyo__stagelabel{position:absolute;top:10px;left:12px;z-index:6;font-size:.65rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--wv-muted)}
#builder .wv-dyo__canvas{position:relative;width:100%;touch-action:none}
#builder .wv-dyo__canvas .konvajs-content{position:absolute!important;inset:0}

/* SIGNATURE ELEMENT — the garment silhouette IS the placement boundary.
   Its outline splits into a magenta/cyan pair (an AR tracker edge) while
   dragging, so the constraint is visible exactly when it's relevant. */
#builder .wv-dyo__edge{position:absolute;inset:25px;width:auto;height:auto;pointer-events:none;z-index:4;
  opacity:0;transition:opacity .18s}
#builder .wv-dyo__stage.is-drag .wv-dyo__edge{opacity:1}

#builder .wv-dyo__empty{position:absolute;inset:auto 0 14px;text-align:center;color:var(--wv-muted);
  font-size:.8rem;z-index:5;pointer-events:none}

/* ── right rail ── */
#builder .wv-dyo__rail{display:flex;flex-direction:column;gap:13px;position:sticky;top:24px}
#builder .wv-dyo__card{background:var(--wv-panel);border:1px solid var(--wv-line);border-radius:var(--wv-radius)}
#builder .wv-dyo__cardhead{display:flex;align-items:center;gap:8px;padding:13px 15px;
  border-bottom:1px solid var(--wv-line);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wv-muted)}
#builder .wv-dyo__count{margin-left:auto;color:inherit}

#builder .wv-dyo__layers{max-height:min(40vh,380px);overflow:auto}
#builder .wv-dyo__layer{border-bottom:1px solid var(--wv-line);padding:11px 13px;cursor:pointer}
#builder .wv-dyo__layer:last-child{border-bottom:0}
#builder .wv-dyo__layer.is-sel{background:var(--wv-panel-2);box-shadow:inset 2px 0 0 var(--wv-uv)}
#builder .wv-dyo__layertop{display:flex;align-items:center;gap:10px}
#builder .wv-dyo__layerthumb{width:50px;height:50px;flex:none;background:var(--wv-bg);
  border:1px solid var(--wv-line);border-radius:2px;overflow:hidden}
#builder .wv-dyo__layerthumb img{width:100%;height:100%;object-fit:contain;display:block}
#builder .wv-dyo__layermeta{min-width:0;flex:1}
#builder .wv-dyo__layername{font-size:.6rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#builder .wv-dyo__layersub{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wv-muted);line-height: 1.1;}
#builder .wv-dyo__badge{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;
  border-radius:99px;border:1px solid currentColor;flex:none}
#builder .wv-dyo__badge--augmented{color:var(--wv-uv)}
#builder .wv-dyo__badge--background{color:var(--wv-scan)}
#builder .wv-dyo__badge--accent{color:var(--wv-warn)}
#builder .wv-dyo__iconbtn{background:none;border:1px solid var(--wv-line);color:var(--wv-muted);
  display:flex;align-items:center;justify-content:center;user-select:none;width:24px;height:24px;border-radius:2px;cursor:pointer;font:inherit;font-size:.8rem;
  line-height:1;padding:0;flex:none}
#builder .wv-dyo__iconbtn:hover:not([aria-disabled="true"]){color:inherit;border-color:var(--wv-line-2)}
#builder .wv-dyo__iconbtn[aria-disabled="true"]{opacity:.3;cursor:not-allowed}
#builder .wv-dyo__reorder{display:flex;flex-direction:column;gap:2px;flex:none}

#builder .wv-dyo__sideswap{display:flex;align-items:center;gap:6px;margin-top:9px}
#builder .wv-dyo__sideswap>span{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wv-muted);flex:none}
#builder .wv-dyo__sidebtn{flex:1;padding:5px 4px;text-align:center;user-select:none;background:var(--wv-bg);border:1px solid var(--wv-line);
  border-radius:2px;color:var(--wv-muted);font:inherit;font-size:.72rem;cursor:pointer}
#builder .wv-dyo__sidebtn[aria-pressed="true"]{border-color:var(--wv-uv);color:inherit}
#builder .wv-dyo__nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}
#builder .wv-dyo__num label{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wv-muted);margin-bottom:3px}
#builder .wv-dyo__num input{width:100%;background:var(--wv-bg);border:1px solid var(--wv-line);
  border-radius:2px;padding:5px 6px;color:inherit;font:inherit;font-size:.75rem}

/* ── add-design drill-down ── */
#builder .wv-dyo__addbtn{display:block;width:100%;padding:15px;cursor:pointer;background:transparent;
  border:1px dashed var(--wv-line-2);border-radius:var(--wv-radius);color:inherit;
  font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center;user-select:none}
#builder .wv-dyo__addbtn:hover{border-color:var(--wv-uv);border-style:solid}
#builder .wv-dyo__addbtn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;border-style:dashed}
#builder .wv-dyo__addbtn small{display:block;font-weight:400;letter-spacing:.04em;text-transform:none;
  color:var(--wv-muted);font-size:.75rem;margin-top:4px}
#builder .wv-dyo__back{background:none;border:0;color:var(--wv-muted);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0;user-select:none}
#builder .wv-dyo__back:hover{color:inherit}
#builder .wv-dyo__close{margin-left:auto;background:none;border:0;color:var(--wv-muted);
  cursor:pointer;font-size:1rem;padding:0;user-select:none}
#builder .wv-dyo__types{padding:11px;display:flex;gap:8px}
#builder .wv-dyo__typebtn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;text-align:left;padding:13px 14px;
  background:var(--wv-panel-2);border:1px solid var(--wv-line);
  border-radius:var(--wv-radius);cursor:pointer;color:inherit;user-select:none}
#builder .wv-dyo__typebtn:hover{border-color:var(--wv-uv)}
#builder .wv-dyo__typebtn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
#builder .wv-dyo__typedot{width:9px;height:9px;border-radius:50%;flex:none;margin-bottom: 4px;}
#builder .wv-dyo__typename{display:block;font-weight:700;font-size:.88rem;line-height: 1.1;margin-bottom: 7px;}
#builder .wv-dyo__typenote{display:block;color:var(--wv-muted);font-size:.72rem;line-height: 1.1;}
#builder .wv-dyo__typecost{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
#builder .wv-dyo__search{width:100%;background:var(--wv-bg);border:1px solid var(--wv-line);
  border-radius:var(--wv-radius);padding:10px 12px;color:inherit;font:inherit;font-size:.85rem}
#builder .wv-dyo__pickwrap{max-height:min(60vh,560px);overflow:auto;padding:11px}
#builder .wv-dyo__subcat{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wv-muted);
  margin:14px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--wv-line)}
#builder .wv-dyo__subcat:first-child{margin-top:4px}
#builder .wv-dyo__pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#builder .wv-dyo__pick{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;text-align:center;padding:0;
  background:var(--wv-panel-2);border:1px solid var(--wv-line);border-radius:var(--wv-radius);cursor:pointer;color:inherit;user-select:none}
#builder .wv-dyo__pick:hover{border-color:var(--wv-uv)}
#builder .wv-dyo__pickthumb{width:100%;aspect-ratio:1/1;flex:none;background:var(--wv-bg);
  border:1px solid var(--wv-line);border-radius:2px;overflow:hidden}
#builder .wv-dyo__pickthumb img{width:100%;height:100%;object-fit:contain;display:block}
#builder .wv-dyo__pickname{display:block;font-size:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding: 0 10px 5px 10px;}
#builder .wv-dyo__picksku{display:block;font-size:.65rem;letter-spacing:.06em;color:var(--wv-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#builder .wv-dyo__pickempty{color:var(--wv-muted);font-size:.82rem;padding:8px 4px;margin:0}
/* the add-design zone sits under the builder in the left column */
#builder #wvAddZone{margin-top:14px}
#builder #wvAddZone .wv-dyo__card{border-color:var(--wv-line-2)}

/* ── price summary ── */
#builder .wv-dyo__lines{padding:6px 15px 13px}
#builder .wv-dyo__line{display:flex;gap:10px;padding:10px 0;font-size:.85rem;border-bottom:1px dashed var(--wv-line)}
#builder .wv-dyo__line span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
#builder .wv-dyo__line--sub{color:var(--wv-muted);font-size:.8rem}
#builder .wv-dyo__line--total{border-bottom:0;padding-top:13px;font-size:1.2rem;font-weight:800}
#builder .wv-dyo__free{color:var(--wv-scan);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
#builder .wv-dyo__ctawrap{padding:0 15px 15px}
#builder .wv-dyo__cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;cursor:pointer;background:var(--wv-uv);
  color:var(--wv-bg);border:0;border-radius:var(--wv-radius);font:inherit;font-weight:700;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;letter-spacing: 0.1rem;}
#builder .wv-dyo__cta:hover:not([aria-disabled="true"]){filter:brightness(1.12)}
#builder .wv-dyo__cta[aria-disabled="true"]{background:var(--wv-line-2);color:var(--wv-muted);cursor:not-allowed}
#builder .wv-dyo__cta.is-loading{background:var(--wv-uv);color:var(--wv-bg);cursor:wait}
#builder .wv-dyo__spinner{width:1.1em;height:1.1em;flex:none;border-radius:50%;
  border:2px solid rgba(11,10,16,.3);border-top-color:var(--wv-bg);
  animation:wvDyoSpin .7s linear infinite}
@keyframes wvDyoSpin{to{transform:rotate(360deg)}}
#builder .wv-dyo__disclaimer{padding:0 15px 15px;margin:0;color:var(--wv-muted);font-size:.65rem;line-height:1.6}

/* ── utility: undo/redo + errors ── */
#builder .wv-dyo__tools{display:flex;gap:6px;margin-left:auto}
#builder .wv-dyo__error{padding:10px 15px;color:var(--wv-warn);font-size:.8rem;border-top:1px solid var(--wv-line)}
#builder .wv-dyo--unavailable,#builder .wv-dyo--placeholder{padding:24px;border:1px solid var(--wv-line,#2A2637);border-radius:3px}

/* ── responsive: tablet ≤1000px, mobile ≤690px ── */
@media (max-width:1000px){
  #builder .wv-dyo__editor{grid-template-columns:1fr}
  #builder .wv-dyo__rail{position:static}
  #builder .wv-dyo__editor>div,#builder .wv-dyo__rail{min-width:0}
}
@media (max-width:690px){
  #builder .wv-dyo{overflow-x:clip}
  #builder .wv-dyo__stages{grid-template-columns:1fr;min-width:0}
  #builder .wv-dyo__stage{min-width:0}
  #builder .wv-dyo__canvas{width:100%;max-width:100%;overflow:hidden}
  #builder .wv-dyo__sidetabs{display:flex;border: none;gap: 10px;margin-bottom: 18px;}
  /* theme button styles inflate these; reset hard so each tab is exactly 50% */
  #builder .wv-dyo__sidetab{flex:1 1 0;min-width:0;appearance:none;-webkit-appearance:none;
    border-radius:0;box-shadow:none;text-shadow:none;text-decoration:none;line-height:1.2;
    padding:11px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #builder .wv-dyo__stage[data-side="back"]{display:none}
  #builder .wv-dyo.is-back .wv-dyo__stage[data-side="back"]{display:block}
  #builder .wv-dyo.is-back .wv-dyo__stage[data-side="front"]{display:none}
  /* the 3 type buttons wrap instead of forcing the layout wider */
  #builder .wv-dyo__types{flex-wrap:wrap;flex-direction: column;}
  #builder .wv-dyo__typebtn{flex-direction: column;align-items: center;text-align: center;gap: 3px;}
  #builder .wv-dyo__pickgrid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  #builder .wv-dyo__nums{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){#builder .wv-dyo *{transition:none!important}}
#builder .wv-dyo :focus-visible{outline:2px solid var(--wv-scan);outline-offset:2px}