/* Size chart on the product page (JW Ecom operating dashboard).
   Loaded by the theme block from the dashboard domain, so a design change here
   reaches every store without touching the theme again. Kiwi's popup is the
   reference: product title, a small subtitle, a bordered grid, the sentence
   under it. Sizes are in px on purpose: Dawn sets the root font size to 62.5%,
   so 1rem is 10px there and 16px elsewhere.

   THE UNDERLINE IS ON THE LABEL, NEVER ON THE LINK (2026-09-16). It used to be
   on the <a>, and the theme block writes the link across several lines, so the
   link's first child is a whitespace text node that collapses to one rendered
   space -- and that space was underlined: a ~4px dash in front of the icon, on
   Jericho's own Lavana page. It showed there and not on an ordinary theme
   because size-chart.js turns an ordinary size row into a flex container, where
   leading whitespace is dropped, while Lavana's row stays inline, where it is
   not. inline-block on the svg stopped the decoration reaching the ICON and did
   nothing for the space beside it, which is why the dash survived that fix.
   With the decoration on a span of its own no stray node can be underlined in
   any layout context; size-chart.js wraps the text and drops the whitespace on
   every page, so this holds for blocks pasted before today with no re-paste. */
.jw-size-chart { display: inline-block; margin: 6px 0 12px; }
.jw-size-chart--inline { display: inline; margin: 0 0 0 12px; vertical-align: baseline; }
.jw-size-chart__link {
  font-size: 14px; line-height: 21px; font-weight: 500; letter-spacing: 0;
  text-transform: none; text-decoration: none;
  color: inherit; cursor: pointer; white-space: nowrap;
}
.jw-size-chart__link-text { text-decoration: underline; text-underline-offset: 3px; }
.jw-size-chart__link:hover { opacity: 0.75; }
/* THE INK, NOT THE BOX, IS WHAT HAS TO SIT ON THE TEXT (2026-09-16). The icon's
   drawing is high inside its own square -- ink ran y 2.25 to 16.75 of a 24-high
   viewBox, so its centre was y 9.5 where the box centre is y 12 -- and an
   earlier "aligned within 0.3px" measurement had measured the BOX. The box was
   right and the drawing inside it still read ~1.9px high, which is what Jericho
   kept seeing. The viewBox in size-chart.js is offset by that 2.5 now, so ink
   centre and box centre are the same point, and the box is centred on the text's
   mid-cap here: a cap centre sits about 0.35em above the baseline, and an svg's
   baseline is its bottom edge, so a 16px box wants 0.35em - 8px. The em keeps it
   true at whatever font size a theme sets; the 8px is half the height below and
   the two must change together. 16px rather than 18px because 18px of icon on a
   14px line is 4px taller than the cap height, which makes any error visible.
   inline-block also keeps the svg an atomic box, so nothing can decorate it. */
.jw-size-chart__link svg {
  width: 16px; height: 16px; display: inline-block;
  vertical-align: calc(0.35em - 8px); margin-right: 6px;
}
.jw-size-chart__modal {
  display: none; position: fixed; inset: 0; z-index: 2147483000;
  background: rgba(0, 0, 0, 0.55); align-items: center; justify-content: center; padding: 16px;
}
.jw-size-chart__modal[data-open="true"] { display: flex; }
.jw-size-chart__panel {
  position: relative; background: #fff; color: #111; width: 100%; max-width: 760px;
  max-height: 90vh; overflow: auto; border-radius: 8px; padding: 24px 28px 28px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35); font-size: 15px; line-height: 1.45;
  font-family: inherit; text-align: left;
}
.jw-size-chart__close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  font-size: 30px; line-height: 1; cursor: pointer; color: #111; padding: 3px 6px;
}
.jw-size-chart__title { margin: 0 32px 2px 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.jw-size-chart__subtitle { margin: 0 0 16px; font-size: 14px; color: #555; }
.jw-size-chart__label { margin: 16px 0 6px; font-weight: 600; font-size: 14px; }
.jw-size-chart__scroll { overflow-x: auto; }
.jw-size-chart__table { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid #ddd; }
.jw-size-chart__table th, .jw-size-chart__table td {
  padding: 10px 12px; border: 1px solid #ddd; text-align: center; white-space: nowrap; vertical-align: middle;
}
.jw-size-chart__table thead th { font-weight: 600; color: #111; background: #f5f5f5; }
.jw-size-chart__table thead th:first-child { background: #fff; }
.jw-size-chart__table thead th small { display: block; font-weight: 400; font-size: 0.78em; color: #666; }
.jw-size-chart__table tbody th { font-weight: 600; color: #555; background: #fafafa; text-align: center; }
.jw-size-chart__table td small { display: block; font-size: 0.82em; color: #777; }
.jw-size-chart__footer { margin: 18px 0 0; text-align: center; font-size: 14px; color: #333; }
@media (max-width: 600px) {
  .jw-size-chart__panel { padding: 18px 16px 20px; font-size: 14px; }
  .jw-size-chart__table { font-size: 14px; }
  .jw-size-chart__table th, .jw-size-chart__table td { padding: 8px 9px; }
  .jw-size-chart--inline { margin-left: 10px; }
}