/** Shopify CDN: Minification failed

Line 171:0 Expected "*/" to terminate multi-line comment

**/


.cmx { margin: 10px 0 0; }

.cmx-toggle { display:flex; gap:10px; margin: 12px 0; }
.cmx-tab { flex:1; padding:12px 14px; border:1px solid #ddd; background:#f3f3f3; font-weight:800; cursor:pointer; }
.cmx-tab.is-active { background:#222; color:#fff; border-color:#222; }
.cmx-ico { margin-right:8px; }

/* ===== Modal base ===== */
.cmx-modal{ position:fixed; inset:0; z-index:2147483647; }
.cmx-modal[hidden]{ display:none !important; }

.cmx-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
}

.cmx-panel{
  position:fixed;
  inset:12px;
  margin:auto;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  width:min(1050px, calc(100% - 24px));
  height:calc(100vh - 24px);
  max-height:calc(100vh - 24px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.cmx-close{
  position:absolute;
  top:10px;
  right:12px;
  border:0;
  background:transparent;
  font-size:28px;
  cursor:pointer;
  z-index:5;
}

/* Layout */
.cmx-grid{ display:grid; grid-template-columns: 1.1fr 1fr; height:100%; }
@media (max-width: 900px){ .cmx-grid{ grid-template-columns:1fr; } }

.cmx-left{ background:#f4f4f4; padding:16px; }
.cmx-figureWrap{ position:relative; height:100%; }
.cmx-figure{ width:100%; height:auto; display:block; }

.cmx-label{
  position:absolute;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
}
.cmx-l-shoulder{ top:10%; left:44%; }
.cmx-l-bust{ top:22%; left:44%; }
.cmx-l-waist{ top:30%; left:44%; }
.cmx-l-hips{ top:39%; left:44%; }
.cmx-l-sleeve{ top:30%; right:6%; }
.cmx-l-stf{ bottom:10%; left:6%; }

/* ==========================
   MOBILE FIGURE TUNING
   ========================== */
@media (max-width: 900px){

  /* make the figure area smaller so inputs have more space */
  .cmx-left{
    padding: 10px;
  }

  /* limit height of the image section (does NOT distort image) */
  .cmx-figureWrap{
    max-height: 330px;       /* adjust: 280-380 */
    overflow: auto;          /* allows scrolling image if needed */
    -webkit-overflow-scrolling: touch;
  }

  .cmx-figure{
    width: 100%;
    height: auto;
    display: block;
  }

  /* reduce label size for mobile so they don’t collide */
  .cmx-label{
    font-size: 11px;
    padding: 5px 7px;
    border-radius: 9px;
  }

  /* OPTIONAL: mobile re-position (only if needed) */
  .cmx-l-shoulder{ top: 26%; left: 45%; }
  .cmx-l-bust{     top: 40%; left: 45%; }
  .cmx-l-waist{    top: 52%; left: 45%; }
  .cmx-l-hips{     top: 70%; left: 45%; }
  .cmx-l-sleeve{   top: 52%; right: 6%; }
  .cmx-l-stf{      bottom: 8%; left: 10%; }
}


/* Right side scroll container */
.cmx-right{
  padding:16px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0;
}

.cmx-title{ margin:0 0 10px; font-size:20px; font-weight:900; }
.cmx-block{ margin: 14px 0; }
.cmx-h4{ font-weight:900; margin-bottom:6px; }
.cmx-sub{ font-size:13px; opacity:.75; margin-bottom:10px; }

.cmx-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.cmx-chip{ border:1px solid #ddd; padding:8px 10px; background:#fff; cursor:pointer; font-weight:800; }
.cmx-chip.is-active{ background:#111; color:#fff; border-color:#111; }

.cmx-units{ display:flex; gap:8px; }
.cmx-unit{ border:1px solid #ddd; padding:8px 12px; background:#fff; cursor:pointer; font-weight:900; }
.cmx-unit.is-active{ background:#111; color:#fff; border-color:#111; }

.cmx-gridFields{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
@media (max-width: 900px){ .cmx-gridFields{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .cmx-gridFields{ grid-template-columns: 1fr; } }

.cmx-input{ display:flex; align-items:center; border:1px solid #ddd; padding:10px; background:#fff; }
.cmx-input input{ border:0; outline:0; width:100%; font-size:14px; background:transparent; }
.cmx-unitLabel{ opacity:.7; margin-left:8px; }

.cmx-meta{ display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-top:6px; }
.cmx-err{ color:#c00; }
.cmx-field.is-invalid .cmx-input{ border-color:#c00; }
.cmx-alert{ color:#c00; font-size:13px; margin-top:10px; }

.cmx-footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  position:sticky;
  bottom:0;
  background:#fff;
  padding:10px 0;
}

.cmx-qty{ display:flex; align-items:center; border:1px solid #ddd; background:#fff; }
.cmx-qbtn{ width:38px; height:38px; border:0; background:#f3f3f3; cursor:pointer; font-size:18px; }
.cmx-qinput{ width:56px; text-align:center; border:0; outline:0; height:38px; }

.cmx-atc{ flex:1; height:40px; border:0; background:#111; color:#fff; font-weight:900; cursor:pointer; }
.cmx-atc[disabled]{ opacity:.35; cursor:not-allowed; }

/* Lock background scroll when modal open */
html.cmx-lock, body.cmx-lock{
  overflow:hidden !important;
  height:100%;
}

/* Mobile: make image area small*