/*
  Size guide trigger + modal.

  These rules used to live in product-detail.css, which only the product page
  loads. The customiser needs the same modal, and a customer who lands straight
  on the customiser from a bundle or a saved link never passes through the
  product page at all, so the guide has to travel with the markup rather than
  with one page's stylesheet. Moved here whole so there is one copy: both pages
  load this file and the modal looks identical on each.

  The trigger rule is deliberately unscoped. In product-detail.css it was
  written as `#pd-detail .pd-size-guide-link`, which meant nothing outside that
  one container could use it.
*/

.pd-size-guide-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  display: flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: opacity 0.2s ease;
}
.pd-size-guide-link:hover { opacity: 0.75; }

.pd-sg-scrim {
  position: fixed; inset: 0; z-index: 1080;
  display: none; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(17, 17, 20, 0.62);
}
.pd-sg-scrim.is-open { display: flex; }
.pd-sg-modal {
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.pd-sg-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e8e8ec;
}
.pd-sg-head h3 { font-family: var(--font-head, inherit); font-size: 1.05rem; margin: 0 0 0.2rem; }
.pd-sg-head p { margin: 0; font-size: 0.8rem; color: #5d5d68; }
.pd-sg-close {
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: #6b6b76; cursor: pointer; padding: 0 0.2rem;
}
.pd-sg-close:hover { color: #111; }
.pd-sg-body { padding: 1.1rem 1.25rem 1.35rem; overflow: auto; }
.pd-sg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pd-sg-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pd-sg-table th, .pd-sg-table td {
  padding: 0.5rem 0.65rem;
  border: 1px solid #e8e8ec;
  text-align: center; white-space: nowrap;
}
.pd-sg-table thead th { background: #f6f6f8; font-weight: 700; }
.pd-sg-table tbody th { background: #fbfbfc; text-align: left; font-weight: 600; }
.pd-sg-note, .pd-sg-help { margin: 0.85rem 0 0; font-size: 0.8rem; color: #5d5d68; }
.pd-sg-help a { color: var(--c-primary); font-weight: 600; }
@media (max-width: 575.98px) {
  .pd-sg-head h3 { font-size: 0.98rem; }
  .pd-sg-table { font-size: 0.76rem; }
}