/* Product guidance and navigation by limestone colour. */
.ds-material-notes h2, .ds-colour-related h2 { font-size: clamp(32px, 3.5vw, 46px); margin-bottom: 32px; }
.ds-material-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.ds-material-note-grid h3 { font-size: 28px; line-height: 1.2; margin-bottom: 16px; }
.ds-material-note-grid p { font-size: 14px; line-height: 1.9; max-width: 530px; }
.ds-material-notes > .ds-text-link { margin-top: 30px; }
.ds-colour-related { border-top: 1px solid var(--line); }
.ds-colour-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ds-colour-links a { display: block; padding: 24px 0; border-top: 1px solid var(--line); }
.ds-colour-links span { display: block; font-family: var(--serif); font-size: 28px; line-height: 1.2; }
.ds-colour-links small { display: block; font-size: 11px; color: var(--muted); margin-top: 12px; }
.ds-colour-links a:hover span { text-decoration: underline; text-underline-offset: 5px; }
.ds-faq-section h2 { overflow-wrap: break-word; }
@media (max-width: 850px) {
  .product-detail-hero > .container > div { flex-direction: column; }
  .product-detail-hero > .container > div > .fade-in { flex: 0 0 auto !important; width: 100%; min-width: 0 !important; }
  .ds-colour-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-material-note-grid { gap: 28px; }
}
@media (max-width: 600px) {
  .ds-material-note-grid { grid-template-columns: 1fr; gap: 32px; }
  .ds-material-note-grid h3 { font-size: 26px; }
  .ds-material-notes h2, .ds-colour-related h2 { margin-bottom: 26px; }
  .ds-colour-links { grid-template-columns: 1fr; gap: 0; }
  .ds-colour-links a { padding: 20px 0; }
  .ds-colour-links span { font-size: 27px; }
  .ds-colour-links small { margin-top: 8px; }
}

/* Shared range specifications, with wrapping values on narrow screens. */
.ds-range-section h2 { margin-bottom:24px; }
.ds-spec-note { font-size:13px; line-height:1.8; margin-bottom:24px; max-width:760px; }
.ds-range-specs { width:100%; table-layout:fixed; }
.ds-range-specs caption { text-align:left; font-size:13px; font-weight:600; padding:0 0 16px; color:var(--ink); }
.ds-range-specs th { width:28%; }
.ds-range-specs th, .ds-range-specs td { vertical-align:top; overflow-wrap:anywhere; }
@media(max-width:600px) {
  .ds-range-specs th { width:32%; }
  .ds-range-specs th, .ds-range-specs td { padding:12px 8px; font-size:12px; }
}