/* ============================================================================
   THEMMIS · Modal "Guia de medidas" (storefront) — fiel a
   themmis-guia-medidas-modal. Teleportado p/ #modal-root (fora do .pdp) →
   escopo próprio .rr-gm*. Comportamento (foco/scroll/ESC) vem do $store.modal.
   Fonte = Manrope (Neue Montreal não existe no projeto · a ref já cai em Manrope).
   ========================================================================== */
.rr-gm-ovl {
  --gm-card-2:#FFFFFF;
  --gm-ink:#15120D; --gm-ink-2:#6E6A5E; --gm-ink-3:#9A968B;
  --gm-line:rgba(21,18,13,.12); --gm-line-2:rgba(21,18,13,.22);
  --gm-head:#F1ECE3; --gm-zebra:#F7F3EC; --gm-hi:#E7E0D2;
  --gm-display:var(--font-family-display, 'Manrope', system-ui, -apple-system, sans-serif);
  --gm-body:var(--font-family-body, 'Manrope', system-ui, -apple-system, sans-serif);

  position:fixed; inset:0; z-index:var(--z-modal, 1000);
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(21,18,13,.5); backdrop-filter:blur(2px);
  font-family:var(--gm-body); color:var(--gm-ink); line-height:1.5;
  animation:rr-gm-fade .2s ease;
}
@keyframes rr-gm-fade { from { opacity:0 } to { opacity:1 } }

/* scroll-lock: modal.css já define body.modal-open; redundância defensiva */
body.modal-open { overflow:hidden; }

.rr-gm {
  position:relative; background:var(--gm-card-2); border-radius:10px;
  width:100%; max-width:980px; max-height:92vh; overflow:auto;
  padding:44px 48px 40px; box-shadow:0 30px 80px rgba(21,18,13,.3);
  -webkit-font-smoothing:antialiased;
  animation:rr-gm-pop .22s ease;
}
@keyframes rr-gm-pop { from { opacity:0; transform:translateY(10px) scale(.99) } to { opacity:1; transform:none } }
.rr-gm *, .rr-gm *::before, .rr-gm *::after { box-sizing:border-box; }
.rr-gm .mono { font-variant-numeric:tabular-nums; }

.rr-gm__close {
  position:absolute; top:22px; right:24px; width:34px; height:34px;
  display:grid; place-items:center; border-radius:50%;
  color:var(--gm-ink); background:none; border:none; cursor:pointer;
  font-family:inherit; transition:background .15s;
}
.rr-gm__close:hover { background:rgba(21,18,13,.06); }
.rr-gm__close svg { width:20px; height:20px; stroke-width:2; }

/* cabeçalho */
.rr-gm__eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gm-ink-3); }
.rr-gm__title { font-family:var(--gm-display); font-size:34px; font-weight:800; letter-spacing:-.01em; line-height:1.05; text-transform:uppercase; margin:2px 0 0; }
.rr-gm__title sup { font-size:.45em; font-weight:600; vertical-align:super; letter-spacing:0; }
.rr-gm__gender { display:inline-block; margin-top:14px; border:1.5px solid var(--gm-line-2); border-radius:6px; padding:6px 16px; font-size:14px; font-weight:600; color:var(--gm-ink); }

/* corpo: ilustração | tabela */
.rr-gm__body { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; margin-top:30px; align-items:center; }
.rr-gm__fig { display:grid; place-items:center; }
.rr-gm__fig svg { width:100%; max-width:440px; overflow:visible; }
.rr-gm__fig .dim { cursor:pointer; transition:opacity .15s; }

/* tabela */
.rr-gm__tablewrap { overflow-x:auto; }
.rr-gm__table { width:100%; border-collapse:separate; border-spacing:0; font-size:15px; }
.rr-gm__table th { background:var(--gm-head); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gm-ink); padding:15px 16px; text-align:center; white-space:nowrap; cursor:default; }
.rr-gm__table th:first-child { text-align:left; border-radius:6px 0 0 6px; }
.rr-gm__table th:last-child { border-radius:0 6px 6px 0; }
.rr-gm__table th.is-hi { background:var(--gm-hi); }
.rr-gm__table td { padding:13px 16px; text-align:center; color:var(--gm-ink-2); border-bottom:1px solid var(--gm-line); }
.rr-gm__table td:first-child { text-align:left; font-weight:700; color:var(--gm-ink); }
.rr-gm__table tbody tr:nth-child(odd) { background:var(--gm-zebra); }
.rr-gm__table tbody tr:last-child td { border-bottom:none; }
.rr-gm__note { font-size:13px; color:var(--gm-ink-2); margin-top:14px; }

/* como medir */
.rr-gm__howto { font-size:12.5px; color:var(--gm-ink-2); line-height:1.7; margin-top:26px; border-top:1px solid var(--gm-line); padding-top:18px; }
.rr-gm__howto b { color:var(--gm-ink); font-weight:700; }
.rr-gm__howto .lead { font-weight:700; color:var(--gm-ink); text-transform:uppercase; letter-spacing:.06em; font-size:11px; margin-right:4px; }

@media (max-width:760px) {
  .rr-gm { padding:34px 20px 28px; }
  .rr-gm__body { grid-template-columns:1fr; gap:24px; }
  .rr-gm__title { font-size:26px; }
  .rr-gm__fig svg { max-width:300px; }
  .rr-gm__table th, .rr-gm__table td { padding:11px 10px; font-size:13px; }
  .rr-gm__table th { font-size:10.5px; letter-spacing:.03em; }
}

@media (prefers-reduced-motion:reduce) {
  .rr-gm-ovl, .rr-gm { animation:none; }
}
