/* The class stays on the dialog when Magnific moves it into .mfp-content.
   Never scope open-dialog styles to the original .stsg-managed wrapper. */
.product-sizechart-popup.stsg-popup {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: 16px auto;
  padding: 56px 0 0;
  background: #fff;
  /* Parent Magnific CSS sets line-height:0 on .mfp-inline-holder .mfp-content. */
  line-height: 1.5;
}

.stsg-popup > .popup-content {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
  padding: 0 24px 24px;
  /* Vertical scrolling belongs to the body; horizontal scrolling to the table. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}

.stsg-popup .stsg-guide { min-width: 0; color: inherit; line-height: 1.5; }
.stsg-popup .stsg-guide h2 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 16px; overflow-wrap: anywhere; }
.stsg-popup .stsg-instructions { margin-bottom: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.stsg-popup .stsg-image { display: block; max-width: 100%; height: auto; margin: 0 auto 20px; }

.stsg-popup .stsg-table-scroll {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.stsg-popup .stsg-table-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.stsg-popup .stsg-table {
  display: table;
  width: 100%;
  min-width: 100%;
  height: auto;
  table-layout: auto;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.stsg-popup .stsg-table tr { display: table-row; height: auto; line-height: 1.5; }
.stsg-popup .stsg-table th,
.stsg-popup .stsg-table td {
  box-sizing: border-box;
  display: table-cell;
  position: static;
  height: auto;
  min-height: 0;
  max-height: none;
  min-width: 5.5rem;
  border: 1px solid #d9d9d9;
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
}
.stsg-popup .stsg-table th { background: #f2f2f2; font-weight: 600; }
.stsg-popup .stsg-table .stsg-first-column {
  width: 16rem;
  min-width: 14rem;
  text-align: start;
}
.stsg-popup .stsg-cell-text {
  display: block;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
}
.stsg-popup .stsg-first-column > .stsg-cell-text { max-width: 20rem; }

/* The empty button is drawn by the theme's ::before/::after. It remains outside
   the scrolling body; do not restore the default text cross. */
.stsg-popup > button.mfp-close {
  box-sizing: border-box;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1046;
  width: 44px !important;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-family: Arial, sans-serif;
  font-size: 0 !important;
  line-height: 42px;
  text-align: center;
  opacity: 1;
}
.stsg-popup > button.mfp-close::before,
.stsg-popup > button.mfp-close::after {
  left: 50%;
  right: auto;
  margin-left: -10px;
  background-color: currentColor;
}
.stsg-popup > button.mfp-close:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
.stsg-popup > button.mfp-close:hover { background: #f2f2f2; }
.stsg-popup > button.mfp-close:active { top: 6px; }

@media (max-width: 767px) {
  .product-sizechart-popup.stsg-popup {
    margin: 8px auto;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .stsg-popup > .popup-content {
    max-width: none;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    padding: 0 12px 16px;
  }
  /* The child otherwise forces all popup tables to 12px with !important. */
  .stsg-popup .stsg-table { min-width: 100%; font-size: 14px !important; }
  .stsg-popup .stsg-table th,
  .stsg-popup .stsg-table td { padding: 10px !important; }
}