.library-page { --library-ink:#14263a; --library-muted:#5d6b77; --library-line:#d7dee3; --library-paper:#fff; background:#f8f8f5; }
.library-hero { width:min(1180px,calc(100% - 48px)); margin:auto; padding:clamp(74px,9vw,126px) 0 72px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(52px,8vw,108px); align-items:end; }
.library-hero > div { max-width:780px; }
.library-hero h1 { margin:0; font-family:"Newsreader",Georgia,serif; font-size:clamp(3.5rem,6.5vw,6rem); line-height:.9; font-weight:500; letter-spacing:-.04em; text-wrap:balance; }
.library-hero > div > p:last-child { max-width:650px; margin:28px 0 0; color:var(--library-muted); font-size:1.08rem; line-height:1.65; }
.library-hero aside { padding:26px 0 7px; border-top:2px solid var(--library-ink); border-bottom:1px solid var(--library-line); }
.library-hero aside strong,.library-hero aside span,.library-hero aside small { display:block; }
.library-hero aside strong { font-family:"Newsreader",Georgia,serif; font-size:2rem; font-weight:500; }
.library-hero aside span { margin-top:3px; color:var(--library-ink); font-size:.9rem; font-weight:700; }
.library-hero aside small { margin:18px 0; color:var(--library-muted); line-height:1.45; }
.library-main { width:min(1180px,calc(100% - 48px)); margin:auto; padding:30px 0 112px; border-top:1px solid var(--library-line); }
.library-toolbar { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:44px; align-items:end; margin:0 0 38px; }
.library-toolbar h2 { margin:0; font-family:"Newsreader",Georgia,serif; font-size:clamp(2rem,4vw,3.8rem); line-height:1; font-weight:500; letter-spacing:-.035em; }
.library-filters { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.library-filters button { min-height:44px; padding:0 15px; border:1px solid #aeb9c0; border-radius:2px; background:transparent; color:var(--library-ink); font-size:.78rem; font-weight:700; cursor:pointer; }
.library-filters button:hover { border-color:var(--library-ink); background:#fff; }
.library-filters button.active { border-color:var(--library-ink); background:var(--library-ink); color:#fff; }
.library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 28px; }
.library-card { min-width:0; overflow:hidden; border:1px solid var(--library-line); border-radius:3px; background:var(--library-paper); transition:border-color .2s ease,transform .2s ease; }
.library-card:hover { border-color:#9ba9b2; transform:translateY(-2px); }
.library-card.selected { border-color:#1266df; box-shadow:0 0 0 2px #1266df; }
.library-card-label { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 18px; color:#536472; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.library-swatches { display:flex; gap:5px; }
.library-swatches i { width:14px; height:14px; border:1px solid rgba(20,38,58,.18); border-radius:50%; background:var(--swatch); }
.library-preview { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border-top:1px solid var(--library-line); border-bottom:1px solid var(--library-line); background:#e8ecee; }
.library-preview img { width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(.94); transition:transform .32s ease,filter .32s ease; }
.library-preview > span { position:absolute; right:14px; bottom:14px; min-height:42px; display:flex; align-items:center; gap:9px; padding:0 14px; background:rgba(255,255,255,.96); color:var(--library-ink); font-size:.73rem; font-weight:800; box-shadow:0 8px 24px rgba(20,38,58,.16); }
.library-preview > span b { color:#1266df; }
.library-preview:hover img,.library-preview:focus-visible img { transform:scale(1.015); filter:saturate(1); }
.library-copy { min-height:190px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding:23px 20px 20px; }
.library-copy h3 { margin:0 0 7px; font-family:"Newsreader",Georgia,serif; font-size:1.6rem; line-height:1.05; font-weight:500; }
.library-copy p { max-width:410px; margin:0; color:var(--library-muted); font-size:.88rem; line-height:1.5; }
.library-copy dl { margin:19px 0 0; }
.library-copy dt { color:#667580; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.library-copy dd { margin:3px 0 0; color:var(--library-ink); font-size:.76rem; font-weight:700; }
.library-copy button { min-height:44px; padding:0; border:0; border-bottom:1px solid currentColor; background:transparent; color:var(--library-ink); font-size:.75rem; font-weight:800; cursor:pointer; white-space:nowrap; }
.library-copy button:hover { color:#1266df; }
.library-card.selected .library-copy button { color:#1266df; }
.library-empty { padding:60px 0; color:var(--library-muted); text-align:center; }
.library-assurance { width:min(1180px,calc(100% - 48px)); margin:0 auto 110px; padding:32px 36px; display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--library-ink); color:#fff; }
.library-assurance strong { font-family:"Newsreader",Georgia,serif; font-size:1.7rem; font-weight:500; }
.library-assurance span { max-width:430px; color:#c5cfd6; font-size:.88rem; text-align:right; }
.library-selection { position:fixed; left:50%; bottom:20px; z-index:90; width:min(880px,calc(100% - 32px)); min-height:86px; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; gap:28px; padding:14px 16px 14px 22px; border:1px solid #33485a; background:#14263a; color:#fff; box-shadow:0 18px 55px rgba(20,38,58,.28); }
.library-selection > div { display:flex; align-items:center; gap:14px; }
.library-selection > div:first-child { display:grid; grid-template-columns:auto 1fr; gap:0 12px; }
.library-selection span { grid-column:1/-1; color:#9ab9d3; font-size:.61rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.library-selection strong { font-family:"Newsreader",Georgia,serif; font-size:1.35rem; font-weight:500; }
.library-selection small { color:#c3ced6; }
.library-selection button { min-height:44px; padding:0; border:0; background:transparent; color:#fff; font-size:.75rem; font-weight:700; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.library-selection .button-primary { border-color:#1266df; background:#1266df; color:#fff; text-decoration:none; }
@media (max-width:900px) {
  .library-hero { grid-template-columns:1fr; gap:34px; }
  .library-hero aside { max-width:440px; }
  .library-toolbar { grid-template-columns:1fr; gap:24px; }
  .library-filters { justify-content:flex-start; }
  .library-copy { grid-template-columns:1fr; gap:10px; }
  .library-copy button { justify-self:start; }
  .library-assurance { align-items:flex-start; flex-direction:column; }
  .library-assurance span { text-align:left; }
}
@media (max-width:680px) {
  .library-hero,.library-main,.library-assurance { width:calc(100% - 32px); }
  .library-hero { gap:24px; padding:44px 0 48px; }
  .library-hero h1 { font-size:clamp(3rem,16vw,4.4rem); }
  .library-hero > div > p:last-child { margin-top:20px; line-height:1.55; }
  .library-hero aside { padding-top:18px; }
  .library-hero aside small { margin:12px 0; }
  .library-grid { grid-template-columns:1fr; }
  .library-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .library-filters button:first-child { grid-column:1/-1; }
  .library-copy { min-height:0; }
  .library-assurance { padding:26px 24px; }
  .library-selection { align-items:stretch; flex-direction:column; gap:10px; }
  .library-selection > div:last-child { justify-content:space-between; }
  .library-selection .button { min-height:48px; padding:0 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .library-card,.library-preview img { transition:none; }
  .library-card:hover { transform:none; }
  .library-preview:hover img,.library-preview:focus-visible img { transform:none; }
}