/* === ZCRAVE Size Recommender (Right Tray) — BASE === */
.zcv-sr2-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9998;opacity:0;visibility:hidden;transition:opacity .25s ease}
.zcv-sr2-overlay.is-open{opacity:1;visibility:visible}
.zcv-sr2-drawer{position:fixed;top:0;right:0;bottom:0;background:#fff;color:#111;z-index:9999;display:flex;flex-direction:column;width:520px;max-width:92vw;border-left:1px solid #e5e7eb;transform:translateX(100%);transition:transform .25s ease}
.zcv-sr2-drawer.is-open{transform:translateX(0)}
.zcv-sr2-head,.zcv-sr2-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #eee}
.zcv-sr2-foot{border-top:1px solid #eee;border-bottom:0}
.zcv-sr2-back,.zcv-sr2-x{background:#fff;border:0;min-width:40px;height:40px;display:grid;place-items:center;cursor:pointer}
.zcv-sr2-h1{flex:1;text-align:center;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zcv-sr2-body{flex:1;overflow:auto;padding:18px}
.zcv-sr2-hint{border:none;text-align:center;padding:10px;margin-bottom:12px;letter-spacing:0;font-size:8px}
.zcv-title{text-transform:uppercase;letter-spacing:0;font-weight:200;font-size:18px;text-align:left;margin:20px 0 30px}
.zcv-row{display:flex;gap:12px}.zcv-col{flex:1}
.zcv-label{display:block;position:relative;font-size:14px}
.zcv-label-head{display:flex;gap:10px;align-items:center;margin:14px 0 6px;justify-content:space-between}
.zcv-label-head>span:first-child{text-transform:uppercase;letter-spacing:0;font-size:14px}
.zcv-optional{color:#7c7c7c;letter-spacing:0;font-size:8px;margin:-5px 0 0 -3px!important}
.zcv-input{width:100%;height:40px;border:none;border-bottom:.5px solid #000;border-radius:0;background:transparent;padding:6px 2px;font:inherit;outline:none}
.zcv-help{font-size:8px;color:#000;margin-top:6px}
.zcv-linkline{font-size:10px;margin:0 0 24px}
.zcv-open-guide{text-decoration:underline;font-weight:100}
.zcv-error{font-size:8px;font-weight:100;color:#be1620;margin-top:4px}
.zcv-units{display:flex;gap:8px;margin-left:auto}
.zcv-unit{background:none;border:0;padding:0 3px;font-weight:600;cursor:pointer;opacity:.55;border-bottom:0 solid transparent}
.zcv-unit[aria-pressed="true"]{opacity:1;border:none;border-bottom:1px solid #000}
.zcv-btn,.zcv-btn-ghost{min-width:160px;height:40px;border:.5px solid #000;background:#fff;text-transform:uppercase;letter-spacing:0;font-weight:200;cursor:pointer}
.zcv-btn:hover{background:#000;color:#fff}
.zcv-btn-ghost{opacity:.85}
.zcv-sr2-foot{justify-content:center;gap:12px}
.zcv-step[hidden]{display:none}.zcv-step.is-active{display:block}
.step-meas .zcv-meas-unit-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;font-size:16px;font-weight:200}
.step-meas .zcv-label .zcv-optional{display:none!important}
.zcv-slider-neo{--pos:50%;position:relative;width:100%;min-height:30px;padding-top:20px;padding-bottom:15px;cursor:ew-resize}
.zcv-slider-neo::before{content:"";position:absolute;left:0;right:0;top:25px;height:1px;background:#000}
.zcv-bubble{position:absolute;left:var(--pos);top:-5px;transform:translate(-50%,0);font-size:10px;letter-spacing:0;background:none;color:#000;padding:0 6px;font-weight:400}
.zcv-bubble::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:20px;width:4px;height:10px;background:#000}
.zcv-scale-labels{display:flex;justify-content:space-between;position:relative;margin:0 0 50px 0;text-transform:uppercase;letter-spacing:0;font-size:10px;font-weight:200}
.zcv-scale-labels .zcv-center{position:absolute;left:50%;transform:translateX(-50%);font-weight:200;font-size:10px}
.zcv-slider-neo .zcv-range{-webkit-appearance:none;appearance:none;position:absolute;inset:0;opacity:0.01;cursor:ew-resize}
.zcv-slider-neo .zcv-range::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;border:0;background:transparent}
.zcv-slider-neo .zcv-range::-moz-range-thumb{width:0;height:0;border:0;background:transparent}
.zcv-slider-neo[data-kind="flow"] .zcv-bubble{font-size:0}
.zcv-slider-labels{display:flex;justify-content:space-between;margin:12px 0 0;text-transform:uppercase;letter-spacing:0;font-size:10px}
.zcv-slider-labels span{cursor:pointer;font-weight:200}
.zcv-slider-labels .is-hot{font-weight:600}
.zcv-select-wrap{position:relative}
.zcv-select-wrap .zds-select-field__arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}
.zcv-sr-trigger-wrap{margin-top:10px}
.zcv-btn.zcv-sr-trigger{min-width:160px;height:40px;border:.5px solid #000;background:#fff;text-transform:uppercase;font-weight:200;letter-spacing:0;cursor:pointer}
.zcv-prod-img img{width:80%;height:auto;margin:0 auto;display:block;border:1px solid #eee}
.zcv-step.step-result{text-align:center}
.zcv-step.step-result .zcv-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
@media (max-width:640px){.zcv-sr2-drawer{width:100%}.zcv-title{font-size:16px}}


/* ===== User appended overrides (zcv-updates.css) ===== */

/* ===== ZCRAVE SR2 Consolidated Updates =====
   Source: comments.txt, comments2.txt, comments3.txt, comments4.txt
   This stylesheet consolidates requests across all 4 docs.
================================================ */

/* 0) Base input + select styling (border-bottom only) */
.zcv-input[type="text"],
.zcv-input[type="number"],
.zcv-input,
select.zcv-input {
  border: none !important;
  border-bottom: 0.5px solid #000 !important;
  border-radius: 0 !important;
  background: transparent;
  outline: none;
  padding-left: 0;
  padding-right: 28px; /* space for dropdown arrow where applicable */
  box-shadow: none !important;
}

/* Remove native number spinners for consistency */
.zcv-input[type="number"] {
  -moz-appearance: textfield;
}
.zcv-input[type="number"]::-webkit-outer-spin-button,
.zcv-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 1) First step: hide Back arrow; globally remove borders and enlarge icons */
.zcv-step.is-active:first-of-type .zcv-sr2-back {
  display: none !important; /* remove back arrow in step 1 */
}
.zcv-sr2-back,
.zcv-sr2-x {
  background: transparent;
  border: none !important;
  padding: 6px;
  line-height: 1;
  cursor: pointer;
}
/* Ensure embedded SVG icons scale up a bit */
.zcv-sr2-back svg,
.zcv-sr2-x svg {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* 2) Required/optional rules (Height & Weight required) + error text style */
.zcv-field.is-required .zcv-input:invalid ~ .zcv-error,
.zcv-input.is-required:invalid ~ .zcv-error {
  display: block;
}
.zcv-error {
  display: none;
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 100;
  color: #be1620;
}

/* 3) Units buttons (CM/IN, KG/LBS) are clickable + right aligned */
.zcv-unit {
  cursor: pointer;
  user-select: none;
}
.zcv-label-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between; /* aligns .zcv-units to the right */
  gap: 8px;
}
.zcv-units {
  display: inline-flex;
  gap: 6px;
}

/* 4) Slider labels: default non-bold, hover shows link cursor; selected gets 600 */
.zcv-slider-labels span {
  font-weight: 400;       /* remove default bold */
  cursor: pointer;        /* "link" cursor */
}
.zcv-slider-labels .is-hot {
  font-weight: 600;
}
/* Add drag cursor over the bar */
.zcv-slider-labels,
.zcv-slider {
  cursor: grab;
}
.zcv-slider:active,
.zcv-slider-labels:active {
  cursor: grabbing;
}

/* 5) Add custom down arrows to selects and number input (bra band)
      Uses the provided SVG as a background image on the right side */
select.zcv-input,
.zcv-input.js-bra-band {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 20px 20px;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="zds-select-field__arrow"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 16.6644L3.67065 9.3763L4.32916 8.62372L11.9999 15.3356L19.6707 8.62372L20.3292 9.3763L11.9999 16.6644Z" fill="black"></path></svg>');
}

/* 6) Bra size help spacing & size result padding */
.zcv-title + .zcv-help {
  margin-top: 4px; /* bring closer to title */
}
#zcv-size {
  padding-top: 20px;
}

/* 7) Center the footer CTA on steps that use .zcv-sr2-foot */
.zcv-sr2-foot {
  display: flex;
  justify-content: center;
}
.zcv-sr2-foot .zcv-btn,
.zcv-sr2-foot .zcv-btn-ghost {
  margin-left: auto;
  margin-right: auto;
}

/* 8) Hide waist/hip inputs if present */
.zcv-input.js-waist,
.zcv-input.js-hip {
  display: none !important;
}

/* 9) Buttons: ghost style tweaks (no border; hover font-weight:400) */
.zcv-btn-ghost {
  background: transparent;
  border: none !important;
  font-weight: 300;
  text-decoration: underline;
  cursor: pointer;
}
.zcv-btn-ghost:hover,
.zcv-btn-ghost:focus {
  font-weight: 400;
  text-decoration: underline;
}

/* 10) Result step centering */
section.zcv-step.step-result {
  display: grid;
  place-items: center;
  text-align: center;
}

/* 11) Product image 20% smaller & centered */
#zcv-prod-img img {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 12) Bra-size input/select shared border-bottom already handled above */

/* 13) Misc: ensure links look clickable (Contour Map Guide) */
.zcv-linkline a,
a.zcv-open-guide {
  cursor: pointer;
  text-decoration: underline;
}

/* 14) Last-step: swap Continue -> Apply & Add to Bag (styles)
    NOTE: Actual DOM swap should be done in HTML/JS; below hides default in last step. */
.zcv-step.step-last .zcv-btn.js-cta {
  display: none !important;
}
.zcv-step.step-last .zcv-btn-ghost.js-apply-add {
  display: inline-flex;
}
/* Also center the review step action buttons & stack vertically on small screens */
.zcv-step.step-result .zcv-btn-ghost {
  display: inline-block;
  margin: 6px auto;
}
@media (max-width: 480px) {
  .zcv-step.step-result .zcv-btn-ghost {
    display: block;
  }
}

/* 15) Accessibility: make unit toggle pressed state visible */
.zcv-unit[aria-pressed="true"] {
  text-decoration: underline;
  font-weight: 600;
}

/* ===== End user overrides ===== */