/* ═══════════════════════════════════════════════════════════
   NECTUS · sizes.css — the size guide

   Sits above the product drawer (z-index 50) rather than replacing
   it, so the garment stays on screen behind the numbers.
   ═══════════════════════════════════════════════════════════ */

.sg-scrim{
  position:fixed;inset:0;z-index:70;
  background:rgba(7,8,10,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
}
.sg-scrim.on{opacity:1;pointer-events:auto}

.sg{
  position:fixed;z-index:71;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 36px));max-height:min(88vh,760px);
  background:var(--pitch);border:1px solid var(--hair);
  display:none;overflow:auto;overscroll-behavior:contain;
}
.sg.on{display:block}

.sg-x{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--hair);background:rgba(7,8,10,.7);
}
.sg-x svg{width:13px;height:13px;stroke:var(--mercury);fill:none;stroke-width:1.3}
.sg-x:hover{border-color:var(--platinum)}
.sg-x:hover svg{stroke:var(--platinum)}

.sg-in{padding:34px 30px 30px}
.sg-in h3{
  font-family:var(--disp);font-weight:500;font-size:2.2rem;line-height:.95;
  text-transform:uppercase;margin:12px 0 10px;color:var(--platinum);
}
.sg-note{font-size:.9rem;line-height:1.7;color:var(--mercury);margin-bottom:22px;max-width:46ch}

/* ── inches / centimetres ─────────────────────────────────── */
.sg-unit{display:flex;gap:2px;margin-bottom:20px}
.sg-unit button{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iron);padding:9px 14px;border:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.sg-unit button:hover{color:var(--mercury)}
.sg-unit button.on{color:var(--platinum);border-color:var(--hair);background:var(--graphite)}

/* ── the table ────────────────────────────────────────────── */
/* A grid rather than a <table>: three columns that stay aligned at
   any width, and rows that can be hairline-ruled without fighting
   border-collapse. */
.sg-table{border-top:1px solid var(--hair)}

.sg-head,.sg-row{
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;
  gap:12px;padding:13px 4px;border-bottom:1px solid var(--hair-2);
}
.sg-head{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--iron);
}
.sg-row{
  font-family:var(--mono);font-size:.86rem;letter-spacing:.06em;
  color:var(--mercury);font-variant-numeric:tabular-nums;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.sg-row:hover{background:var(--graphite);color:var(--platinum)}
.sg-row .sg-s{color:var(--platinum);letter-spacing:.16em}

.sg-head span:not(:first-child),
.sg-row span:not(:first-child){text-align:right}

.sg-how{
  font-size:.86rem;line-height:1.8;color:var(--iron);
  margin-top:22px;padding-top:18px;border-top:1px solid var(--hair-2);
}

/* ── the trigger, in the product drawer ───────────────────── */
.sg-open{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mercury);display:inline-flex;align-items:center;gap:9px;
  padding:11px 0;border-bottom:1px solid var(--hair-2);width:100%;
  transition:color .3s var(--ease);
}
.sg-open:hover{color:var(--platinum)}
.sg-open svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.3;flex:0 0 auto}
.sg-open .sg-arrow{margin-left:auto;font-size:.9rem;line-height:1}

@media (max-width:560px){
  .sg-in{padding:30px 20px 24px}
  .sg-in h3{font-size:1.8rem}
  .sg-head,.sg-row{padding:12px 2px;gap:8px}
  .sg-row{font-size:.82rem}
  .sg-head{font-size:.64rem;letter-spacing:.16em}
}