
/* Figure Paths Step 2 — Consolidated CSS (base) */
:root { --zcv-black:#000; --zcv-muted:#777; --zcv-border:#000; }
.step-meas .zcv-title{ font-family:"input-mono",monospace; text-transform:uppercase; letter-spacing:3px; font-weight:300; text-align:center; margin:12px 0 10px }
.step-meas .zcv-meas-unit-row{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 8px }
.step-meas .zcv-sub{ font-size:12px; opacity:.9 }
.step-meas .zcv-units{ display:flex; gap:14px }
.step-meas .zcv-unit{ background:none;border:0;padding:0 2px;font-family:"input-mono";font-weight:600 }
.step-meas .zcv-unit[aria-pressed="true"], .step-meas .zcv-unit.active{ border-bottom:1px solid var(--zcv-black) }
.zcv-ruler-wrap{ position:relative; margin:18px 0 24px }
.zcv-ruler-labels{ display:flex; justify-content:space-between; font-size:11px; text-transform:uppercase; opacity:.85; margin-bottom:6px }
.zcv-ruler{ appearance:textfield; width:100%; height:42px; padding:0 8px; border:1px solid var(--zcv-border); font-family:"input-mono"; font-size:14px; text-align:center; letter-spacing:.5px; background: linear-gradient(to bottom, transparent 0 18px, var(--zcv-black) 18px 19px, transparent 19px 100%), repeating-linear-gradient(to right, rgba(0,0,0,.8) 0 1px, transparent 1px 8px); background-size:100% 100%; background-position:center; }
.zcv-ruler::-webkit-outer-spin-button, .zcv-ruler::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.zcv-ruler-value{ font-family:"input-mono"; font-size:11px; text-transform:uppercase; text-align:center; margin-top:6px }
.zcv-slider-neo{ margin-top:8px } .zcv-slider-neo .zcv-slider-labels{ display:flex; justify-content:space-between; font-size:11px; text-transform:uppercase; opacity:.9; margin-bottom:4px } .zcv-slider-neo input[type="range"]{ width:100% }

/* === Mockup v2 (with provided ruler SVGs) === */
.zcv-ruler-wrap{ padding: 32px 0 36px }
.zcv-ruler-wrap::before{ content:""; position:absolute; left:50%; top:22px; bottom:44px; width:1px; background:#000; transform:translateX(-50%); }
.zcv-ruler{ height:60px; border:0.5px solid #000; background-image:url('https://zcrave.com/wp-content/plugins/zcrave-size-recommender/assets/svg/black/zcrave_ruler_top_b_d.svg'), url('https://zcrave.com/wp-content/plugins/zcrave-size-recommender/assets/svg/black/zcrave_ruler_bottom_b_d.svg'); background-repeat:repeat-x, repeat-x; background-position:top center, bottom center; background-size:auto 18px, auto 18px; color:transparent !important; caret-color:transparent; }
.zcv-ruler-value{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); }
.zcv-ruler-labels{ font-size:13px; letter-spacing:.6px; margin-bottom:10px }
.step-meas .zcv-title{ font-size:28px; letter-spacing:6px; margin:8px 0 18px }

.zcv-slider-neo .zcv-slider-labels span:nth-child(2){ font-weight:700 }
