/* Material guides extend the existing WJ typography, colours and navigation. */
.materials-page { background:#f4f7f5; }
.materials-page .site-header { color:var(--ink); background:rgba(255,255,255,.97); box-shadow:0 2px 14px #11182709; }
.materials-page .header-social a { color:var(--ink); background:#f0f2f1; border-color:#dce2de; }
.materials-page .header-social a:hover { color:white; background:var(--coral); }
.material-shell { max-width:1440px; padding:0 clamp(20px,5vw,72px); margin:auto; }
.material-main { padding-top:126px; }
.breadcrumbs { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:18px 0 34px; }
.breadcrumbs a:hover { color:var(--green); text-decoration:underline; }
.breadcrumbs span[aria-hidden] { color:#89958e; }
.material-eyebrow { font-size:12px; letter-spacing:.12em; font-weight:800; text-transform:uppercase; color:var(--green); margin:0 0 16px; }
.material-hero { display:grid; grid-template-columns:1.35fr 1fr; align-items:center; gap:64px; padding:10px 0 54px; }
.material-hero h1 { font-size:clamp(42px,4.7vw,68px); line-height:1.06; letter-spacing:-.04em; margin:0 0 22px; max-width:790px; }
.material-hero .lead { font-size:18px; line-height:1.7; color:var(--muted); max-width:660px; margin:0 0 26px; }
.material-hero .hero-summary { font-size:16px; line-height:1.65; }
.material-actions { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0; }
.material-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 20px; border-radius:6px; font-size:14px; font-weight:750; border:1px solid var(--line); background:white; color:var(--ink); }
.material-button.primary { background:var(--coral); border-color:var(--coral); color:white; }
.material-button:hover { border-color:var(--green); }
.material-button.primary:hover { background:#ba4430; border-color:#ba4430; }
.material-tags { display:flex; flex-wrap:wrap; gap:8px; }
.material-tags span { font-size:12px; font-weight:650; padding:7px 11px; background:#e7eeea; color:#426054; border-radius:4px; }
.material-photo { background:white; border-radius:12px; padding:28px; margin:0; border:1px solid #e7ece8; }
.material-photo img { width:100%; height:300px; object-fit:contain; }
.material-photo figcaption { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #edf0ee; margin-top:14px; padding-top:15px; font-size:12px; color:var(--muted); }
.material-band { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid #dce5df; margin-bottom:66px; padding:24px 0; gap:24px; }
.material-band strong { display:block; font-size:17px; margin-bottom:6px; }
.material-band span { font-size:13px; color:var(--muted); }
.material-section { margin:0 0 70px; scroll-margin-top:126px; }
.material-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.material-heading h2,.tds-section h2 { font-size:clamp(26px,2.7vw,36px); letter-spacing:-.025em; line-height:1.2; margin:0 0 10px; }
.material-heading p,.tds-section>p { color:var(--muted); font-size:15px; line-height:1.7; margin:0; max-width:730px; }
.material-featured { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.material-card { background:white; border-radius:10px; border:1px solid #e3e9e5; overflow:hidden; }
.material-card-top { display:grid; grid-template-columns:1fr 170px; padding:28px; gap:20px; align-items:center; border-bottom:1px solid #ecf0ed; }
.material-card-top img { width:170px; height:170px; object-fit:contain; }
.material-card h3 { font-size:26px; margin:6px 0 12px; letter-spacing:-.02em; }
.material-card p { font-size:14px; line-height:1.65; color:var(--muted); margin:0; }
.material-card-bottom { padding:22px 28px; }
.material-card dl { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 0 24px; }
.material-card dt { color:var(--muted); font-size:12px; margin-bottom:5px; }
.material-card dd { margin:0; font-size:16px; font-weight:700; }
.material-card-bottom .material-button { width:100%; }
.material-table-wrap { overflow:auto; background:white; border:1px solid #e0e7e2; border-radius:8px; }
.material-table { border-collapse:collapse; width:100%; font-size:14px; text-align:left; }
.material-table th { background:#eaf0ec; font-size:12px; font-weight:750; color:#47604f; padding:16px 20px; }
.material-table td { padding:15px 20px; line-height:1.5; border-top:1px solid #e8ede9; vertical-align:top; }
.material-table td:first-child { font-weight:600; }
.material-table a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.material-table .value-cell { overflow-wrap:anywhere; }
.material-table-wrap.properties .value-cell { white-space:nowrap; font-weight:650; }
.material-note { font-size:12px; color:var(--muted); line-height:1.7; margin:12px 0 0; }
.material-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin:22px 0; }
.material-filters { display:flex; gap:8px; flex-wrap:wrap; }
.material-filters button { font:inherit; font-size:13px; color:var(--muted); background:transparent; border:1px solid #d7e1da; border-radius:6px; padding:10px 15px; cursor:pointer; }
.material-filters button[aria-pressed=true] { background:var(--green); border-color:var(--green); color:white; }
.material-search input { border:1px solid #d7e1da; border-radius:6px; padding:12px 14px; font:inherit; font-size:13px; background:white; width:240px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.material-catalog { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.catalog-card { background:white; border:1px solid #e3e9e5; padding:22px; border-radius:8px; display:flex; flex-direction:column; }
.catalog-card h3 { margin:8px 0 12px; font-size:19px; }
.catalog-card p { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 20px; }
.catalog-card a { margin-top:auto; color:var(--green); font-size:13px; font-weight:750; text-decoration:underline; text-underline-offset:4px; }
[hidden] { display:none!important; }
.material-empty { padding:36px; text-align:center; border:1px solid #d7e1da; border-radius:8px; }
.material-crosslink { border-left:3px solid var(--green); padding:18px 24px; background:#e9efeb; margin-top:22px; font-size:14px; line-height:1.7; }
.material-crosslink a { color:var(--green); font-weight:700; text-decoration:underline; }
.material-cta { background:#e5ece7; border-radius:10px; padding:42px; display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:center; }
.material-cta h2 { font-size:30px; letter-spacing:-.025em; margin:0 0 12px; }
.material-cta p { color:var(--muted); font-size:15px; line-height:1.7; margin:0; }
.material-cta .material-actions { justify-content:end; margin:0; }
.material-footer { margin-top:70px; padding:28px 0; border-top:1px solid #dce5df; font-size:12px; color:var(--muted); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.material-footer a { text-decoration:underline; }
.tds-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:52px; align-items:start; }
.tds-layout > * { min-width:0; }
.tds-sidebar { position:sticky; top:124px; border-top:1px solid #cfdad2; padding-top:20px; }
.tds-sidebar p { font-size:11px; color:var(--muted); font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.tds-sidebar a { display:block; font-size:13px; padding:11px 0; color:var(--muted); }
.tds-sidebar a:hover { color:var(--green); }
.tds-sidebar .material-button { margin-top:14px; text-align:center; padding:12px; }
.tds-section { margin-bottom:54px; scroll-margin-top:126px; }
.tds-section h3 { font-size:18px; margin:28px 0 16px; }
.tds-section .material-table-wrap { margin-top:22px; }
.tds-source { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; background:#e6eee8; border-radius:6px; padding:15px 18px; font-size:12px; line-height:1.5; margin:0 0 28px; }
.tds-callout { background:#e9efeb; border-left:3px solid var(--green); padding:20px 24px; margin:22px 0; font-size:14px; line-height:1.75; color:#42534b; }
.tds-specs { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:24px; background:white; border:1px solid #e0e7e2; border-radius:8px; margin:0 0 48px; }
.tds-specs dt { color:var(--muted); font-size:11px; margin-bottom:8px; }
.tds-specs dd { font-size:21px; font-weight:750; margin:0; }
.material-faq details { border-top:1px solid #dce5df; padding:20px 0; }
.material-faq summary { cursor:pointer; font-size:15px; font-weight:650; }
.material-faq p { color:var(--muted); font-size:14px; line-height:1.75; margin-bottom:0; }
.material-related { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:22px; }
.material-related a { border:1px solid #d7e1da; background:white; padding:22px; border-radius:8px; }
.material-related strong { font-size:18px; display:block; margin-bottom:8px; }
.material-related span { color:var(--muted); font-size:13px; }
.material-home-link { display:block; border-radius:8px; }
.material-home-link:focus-visible,.material-button:focus-visible,.catalog-card a:focus-visible,.material-filters button:focus-visible,.material-search input:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.material-home-link:hover h3 { color:var(--green); }
@media(max-width:1100px) { .material-hero { gap:30px; } .tds-layout { grid-template-columns:180px minmax(0,1fr); gap:30px; } .material-card-top { grid-template-columns:1fr 120px; padding:22px; } .material-card-top img { width:120px; height:150px; } }
@media(max-width:920px) { .material-main { padding-top:108px; } .material-hero { gap:24px; } .material-hero h1 { font-size:42px; } .material-photo img { height:240px; } .material-catalog { grid-template-columns:repeat(2,1fr); } .tds-layout { grid-template-columns:1fr; } .tds-sidebar { position:static; display:flex; flex-wrap:wrap; gap:4px 20px; } .tds-sidebar p,.tds-sidebar>.material-button { display:none; } .tds-sidebar a { padding:9px 0; } .material-cta { grid-template-columns:1fr; gap:20px; } .material-cta .material-actions { justify-content:start; } }
@media(max-width:640px) { .material-main { padding-top:92px; } .breadcrumbs { font-size:12px; margin:22px 0; } .material-hero { grid-template-columns:1fr; padding-bottom:32px; gap:20px; } .material-hero h1 { font-size:42px; } .material-hero .lead { font-size:16px; } .material-photo { padding:20px; } .material-photo img { height:210px; } .material-band { gap:18px; padding:22px 0; margin-bottom:40px; grid-template-columns:1fr; } .material-band>div { display:flex; justify-content:space-between; gap:16px; align-items:center; } .material-band strong { font-size:15px; margin:0; } .material-band span { text-align:right; font-size:12px; } .material-heading { display:block; } .material-featured,.material-catalog,.material-related { grid-template-columns:1fr; } .material-card-top { grid-template-columns:1fr 100px; } .material-card-top img { width:100px; height:135px; } .material-card h3 { font-size:23px; } .material-card-bottom { padding:20px 22px; } .material-section { margin-bottom:44px; } .material-tools { align-items:stretch; } .material-search,.material-search input { width:100%; } .material-table { font-size:12px; } .material-table td,.material-table th { padding:12px; } .material-table-wrap.compare .material-table { min-width:590px; } .material-table-wrap.properties .material-table { min-width:540px; } .material-cta { padding:28px; } .tds-specs { grid-template-columns:repeat(2,1fr); padding:20px; } .tds-specs dd { font-size:19px; } .tds-section { margin-bottom:40px; } .tds-section .material-table-wrap { margin-top:18px; } .tds-sidebar { gap:0 16px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Larger product stage keeps the original spool fully visible. */
.material-hero { grid-template-columns:1.12fr 1fr; gap:42px; }
.material-hero > * { min-width:0; }
.material-photo { padding:20px 24px; box-shadow:0 12px 35px #142c2010; }
.material-photo-stage { height:440px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.material-photo-stage img { display:block; width:100%; height:100%; object-fit:contain; transform:scale(1.24); }
.material-photo figcaption { margin-top:0; }
.catalog-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.catalog-parameters { margin:0 0 24px; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:16px; border-top:1px solid #e8ede9; }
.catalog-parameters dt { font-size:11px; color:var(--muted); margin-bottom:6px; }
.catalog-parameters dd { font-size:13px; font-weight:700; margin:0; }
.material-family-links { display:flex; flex-wrap:wrap; gap:10px; }
.material-family-links a { display:block; padding:12px 20px; border:1px solid #d7e1da; background:white; border-radius:6px; color:var(--green); font-weight:650; font-size:14px; }
.material-family-links a:hover { border-color:var(--green); background:#e9efeb; }
.material-family-links a:focus-visible,.catalog-card a:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.material-table-wrap.family-compare .material-table { min-width:620px; }
.material-availability { display:block; margin-top:8px; color:var(--green); font-size:12px; font-weight:600; }
@media(max-width:1100px) { .material-hero { gap:30px; } .material-photo-stage { height:370px; } }
@media(max-width:920px) { .material-photo-stage { height:320px; } }
@media(max-width:640px) { .material-hero { grid-template-columns:1fr; gap:24px; } .material-photo { padding:16px; } .material-photo-stage { height:300px; } .material-photo-stage img { height:100%; } .material-photo figcaption { font-size:11px; } }
/* Give the hero copy comparable visual weight to the larger product stage. */
  .material-hero h1 { font-size:clamp(54px,5.4vw,82px); line-height:1.04; margin-bottom:26px; }
  .material-hero .lead { font-size:20px; line-height:1.65; max-width:720px; }
  .material-hero .hero-summary { font-size:18px; line-height:1.65; }
  .material-hero .material-eyebrow { font-size:13px; margin-bottom:20px; }
  .material-hero .material-actions { margin:28px 0; gap:14px; }
  .material-hero .material-button { min-height:56px; font-size:15px; padding:16px 24px; }
  .material-hero .material-tags span { font-size:13px; padding:8px 12px; }
}

/* Grade-specific images share a square canvas and complete, proportional framing. */
.material-photo-specific .material-photo-stage img { transform:none; object-fit:contain; width:100%; height:100%; }
.pdf-language-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:18px 0; border-top:1px solid #e4eae6; margin-top:20px; }
.pdf-language-links strong { margin-right:10px; }
.pdf-language-links a { color:var(--teal); padding:8px 12px; border:1px solid #dce5df; border-radius:6px; text-decoration:none; }
.pdf-language-links a[aria-current] { background:#e9f1ed; font-weight:700; }
.materials-page .language-menu.open .language-options { opacity:1; visibility:visible; pointer-events:auto; }