/* size-chart.css: the product page's "Size chart" link and window (garments).
   Loaded only when the product has a chart (shop/product.php), so style.css stays as it is. */
/* ---------- Size chart (garments product page) ----------------------------
   The "Size chart" link beside the Size heading (or under the choices when
   there is no such row), and the window it opens. size-chart.js; markup in
   shop/product.php. The zoom frame mirrors .tryon-zoom: exactly the picture's
   size, so the magnified layer and hint (shared with the product photo) sit on
   the chart rather than on the grey around it. */
.pd-sizechart{margin-top:.9rem;}
.pd-sizechart-link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:0;border:0;background:none;cursor:pointer;
  color:var(--violet);font-size:.85rem;font-weight:600;
  letter-spacing:0;text-transform:none;
  text-decoration:underline;text-underline-offset:3px;
}
.pd-sizechart-link:hover{color:var(--violet-dark);}
.pd-sizechart-link .bi{font-size:1rem;}
/* In the Size row: "Size: M" on the left, the link pushed to the right. */
.pd-opt-head.has-sizechart{display:flex;align-items:baseline;gap:.25rem;}
.pd-opt-head.has-sizechart .pd-sizechart-link{margin-left:auto;}

.sizechart-modal .modal-body{padding-top:.5rem;}
.sizechart-result{position:relative;border-radius:1rem;overflow:hidden;background:var(--mist);text-align:center;}
.sizechart-zoom{position:relative;display:inline-block;max-width:100%;vertical-align:top;line-height:0;}
.sizechart-zoom img{display:block;max-width:100%;max-height:calc(100vh - 11rem);width:auto;height:auto;}
.sizechart-zoom .pd-zoom-hint{line-height:1.4;}
.sizechart-zoom.can-zoom{cursor:zoom-in;}
.sizechart-zoom.is-zoomed-inplace .pd-zoom-inplace{display:block;}
.sizechart-zoom.is-zoomed-inplace{touch-action:none;cursor:zoom-out;}
.sizechart-zoom.zoom-on-hover.is-zoomed-inplace{cursor:crosshair;}
.sizechart-zoom.zoom-on-hover.is-zoomed-inplace .pd-zoom-hint{opacity:0;}
/* Until the picture has arrived (or if it cannot), only the message shows. */
.sizechart-result.is-loading .sizechart-zoom,
.sizechart-result.is-error .sizechart-zoom{display:none;}
.sizechart-state{padding:3.5rem 1rem;color:var(--muted);font-size:.9rem;line-height:1.4;}
.sizechart-state[hidden]{display:none;}
.sizechart-state a{color:var(--violet);font-weight:600;}
.sizechart-note{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;justify-content:space-between;}
.sizechart-tip{flex:1 1 15rem;}
.sizechart-note a{color:var(--violet);font-weight:600;}
.sizechart-note .bi{color:var(--violet);}
@media (max-width:575.98px){
  .sizechart-modal .modal-body{padding:.5rem 1rem 1rem;}
}