/* Preview-only sample library. Images are illustrative, names remain live text. */
.nova-page-custom-jewelry .nova-cj-library { padding: 88px 0; background: #faf9f7; scroll-margin-top: 105px; }
.nova-page-custom-jewelry .nova-cj-library .nova-cj-heading-row { grid-template-columns: 1.1fr 1fr; gap: 70px; }
.nova-page-custom-jewelry .nova-cj-library h2 { max-width: 18ch; }
.nova-cj-library__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 34px 0 0; padding: 14px 0; border-block: 1px solid #ddd8d2; }
.nova-cj-library__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; color: #61576a; text-decoration: none; }
.nova-cj-library__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nova-cj-library__disclosure { margin: 18px 0 0; color: #716b67; font-size: .76rem; line-height: 1.65; }
.nova-cj-library__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 54px 34px; margin-top: 42px; }
.nova-cj-swatch-panel { min-width: 0; scroll-margin-top: 120px; }
.nova-cj-swatch-panel--wide { grid-column: 1/-1; }
.nova-cj-swatch-panel header { margin-bottom: 22px; }
.nova-cj-swatch-panel h3 { margin: 8px 0 0; font: 400 clamp(1.9rem,2.4vw,2.6rem)/1.1 var(--nova-font-heading); letter-spacing: -.025em; }
.nova-cj-swatch-panel .nova-eyebrow { margin: 0; }
.nova-page-custom-jewelry .nova-cj-swatch-table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0; background: #fff; }
.nova-page-custom-jewelry .nova-cj-swatch-table td { padding: 0; border: 1px solid #dedad5; background: #fff; }
.nova-cj-sample { display: flex; position: relative; flex-direction: column; align-items: center; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 12px 8px 18px; margin: 0; color: #373137; background: #fff; cursor: zoom-in; font: inherit; }
.nova-cj-sample__image, .nova-cj-sample-preview { background-image: url('../../assets/images/phase2/custom-jewelry/custom-swatch-atlas-v1.png'); background-size: 696.6667% 696.6667%; background-position: var(--sample-x) var(--sample-y); background-repeat: no-repeat; background-color: #fff; }
.nova-cj-sample__image { display: block; width: min(100%,150px); aspect-ratio: 1; }
.nova-cj-sample__name { display: flex; align-items: center; justify-content: center; min-height: 2.8em; margin-top: 2px; font-size: .76rem; line-height: 1.4; text-align: center; }
.nova-cj-sample__zoom { position: absolute; right: 9px; top: 7px; color: #958b9e; font-size: .85rem; }
.nova-cj-sample:hover .nova-cj-sample__name { text-decoration: underline; text-underline-offset: 4px; }
.nova-cj-sample:focus-visible { outline: 2px solid #786681; outline-offset: -4px; }
.nova-cj-swatch-panel__note { margin: 15px 0 0; max-width: 85ch; font-size: .78rem; color: #6c6664; line-height: 1.7; }
.nova-cj-library__footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid #ddd8d2; margin-top: 44px; padding-top: 25px; }
.nova-cj-library__footer p { max-width: 64ch; margin: 0; font-size: .85rem; line-height: 1.7; }
.nova-page-custom-jewelry .nova-cj-comparison { margin-top: 38px; }
.nova-page-custom-jewelry .nova-cj-comparison table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.nova-cj-comparison caption { text-align: left; font-size: .84rem; color: #65576e; margin-bottom: 17px; }
.nova-cj-comparison th, .nova-cj-comparison td { border: 1px solid #dedad5; padding: 22px; text-align: left; vertical-align: middle; font-size: .82rem; font-weight: 400; line-height: 1.7; }
.nova-cj-comparison thead th { background: #f1eeea; font-size: .73rem; color: #61546b; font-weight: 600; }
.nova-cj-comparison tbody th { background: #faf9f7; }
.nova-cj-material-name { display: block; font: 400 1.65rem/1.2 var(--nova-font-heading); margin-bottom: 12px; }
.nova-cj-material-thumb { display: block; width: 100%; max-width: 180px; aspect-ratio: 3/2; object-fit: cover; }
.nova-cj-table-note { font-size: .76rem; line-height: 1.65; color: #716b67; margin: 17px 0 0; }
.nova-cj-sample-dialog { width: min(480px,calc(100vw - 36px)); max-height: calc(100dvh - 36px); overflow: auto; padding: 34px; border: 1px solid #dedad5; background: #fff; color: #373137; }
.nova-cj-sample-dialog::backdrop { background: rgb(31 24 35 / .48); }
.nova-cj-sample-dialog h2 { margin: 12px 30px 15px 0; font: 400 2.1rem/1.08 var(--nova-font-heading); }
.nova-cj-sample-preview { width: 100%; aspect-ratio: 1; }
.nova-cj-sample-dialog > p:last-child { margin: 16px 0 0; font-size: .78rem; line-height: 1.65; color: #716b67; }
.nova-cj-sample-close { position: absolute; top: 7px; right: 7px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #554a5d; cursor: pointer; font-size: 27px; }
@media (max-width: 900px) {
  .nova-page-custom-jewelry .nova-cj-library .nova-cj-heading-row { grid-template-columns: 1fr; gap: 22px; }
  .nova-cj-library__grid { gap: 38px 22px; }
  .nova-cj-comparison th, .nova-cj-comparison td { padding: 14px; }
}
@media (max-width: 600px) {
  .nova-cj-library__grid { grid-template-columns: 1fr; }
  .nova-cj-library__nav { gap: 2px 20px; }
  .nova-cj-swatch-panel--wide tbody { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .nova-cj-swatch-panel--wide tr { display: contents; }
  .nova-cj-swatch-panel--wide td { display: block; margin: -1px 0 0 -1px; }
  .nova-cj-sample { padding: 7px 5px 12px; }
  .nova-cj-sample__name { font-size: .7rem; }
  .nova-cj-library__footer { display: block; }
  .nova-cj-library__footer .nova-cj-text-link { margin-top: 12px; }
  .nova-cj-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nova-cj-comparison tbody, .nova-cj-comparison tr, .nova-cj-comparison td, .nova-cj-comparison tbody th { display: block; width: 100%; }
  .nova-cj-comparison tr + tr { margin-top: 20px; }
  .nova-cj-comparison td { border-top: 0; }
  .nova-cj-comparison td::before { content: attr(data-label); display: block; margin-bottom: 7px; color: #74657e; font-size: .67rem; font-weight: 600; }
  .nova-cj-sample-dialog { padding: 28px 22px; }
}