/* Shared modal shell for the product page's size chart and care guide.
   Markup in inc/product-dialogs.php, behaviour in assets/js/dialog.js.
   Per-modal content styling lives in size-chart.css and product.css. */

.bsx-dialog[hidden] { display: none; }

.bsx-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* --bsx-ink at 55% alpha; kept literal because CSS custom properties
   cannot be alpha-composited without a new token. */
.bsx-dialog__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 23, 0.55);
}

.bsx-dialog__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 48px 48px 40px;
  background: #fff;
  border-radius: var(--bsx-radius);
}

.bsx-dialog__close {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--bsx-ink);
  cursor: pointer;
  line-height: 0;
}

.bsx-dialog__title {
  margin: 0 0 32px;
  font-family: var(--bsx-font-heading);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bsx-ink);
}

html.bsx-dialog-open,
html.bsx-dialog-open body { overflow: hidden; }

/* The care guide is short prose, so it reads better in a narrower column than
   the size chart's table. */
.bsx-dialog--care .bsx-dialog__dialog { max-width: 480px; }

@media (max-width: 549px) {
  .bsx-dialog { padding: 12px; }
  .bsx-dialog__dialog { padding: 40px 20px 28px; }
  .bsx-dialog__title { font-size: 18px; margin-bottom: 24px; }
}