.roof-materials { padding: 80px 24px; background: #f7f8fb; scroll-margin-top: 88px; }
.roof-materials__inner { max-width: 1140px; margin: 0 auto; }
.roof-materials__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 36px; }
.roof-materials__label { display: block; color: #3c60df; font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.roof-materials h2 { color: #08164c; font-size: clamp(34px,4vw,48px); font-weight: 600; line-height: 1.12; letter-spacing: -1.5px; margin: 0; }
.roof-materials__header > p { max-width: 380px; color: #51586b; font-size: 16px; line-height: 1.7; margin: 0; }
.roof-materials__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 24px; align-items: start; }
.roof-material { background: #fff; overflow: hidden; border-radius: 10px; min-width: 0; }
.roof-material__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.roof-material__visual { position: relative; display: block; width: 100%; aspect-ratio: 3/2; padding: 0; border: 0; border-radius: 10px 10px 0 0; background: #e9edf3; cursor: pointer; text-align: left; overflow: hidden; }
.roof-material__roof { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 240ms ease; }
.roof-material__visual[data-view="roof"] .roof-material__roof { opacity: 1; }
.roof-material__visual:focus-visible { outline: 3px solid #3c60df; outline-offset: -4px; }
.roof-material__view-label { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; background: #fff; color: #08164c; border-radius: 6px; padding: 8px 11px; font-size: 12px; font-weight: 600; line-height: 1.4; box-shadow: 0 2px 8px #08164c1a; }
@media (hover: hover) and (pointer: fine) {
 .roof-material:hover .roof-material__visual[data-view="auto"] .roof-material__roof { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .roof-material__roof { transition: none; } }
.roof-material__body { padding: 22px; }
.roof-material h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.5px; color: #08164c; margin: 0 0 8px; }
.roof-material__texture { font-size: 14px; line-height: 1.6; color: #60687a; min-height: 45px; margin: 0 0 18px; }
.roof-material__price { font-size: 28px; line-height: 1.25; font-weight: 600; color: #08164c; letter-spacing: -.7px; margin: 0 0 22px; font-variant-numeric: tabular-nums; }
.roof-material__price span { font-size: 14px; letter-spacing: 0; font-weight: 400; }
.roof-material details { border-top: 1px solid #e0e4ed; border-bottom: 1px solid #e0e4ed; }
.roof-material summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; padding: 14px 0; cursor: pointer; font-size: 14px; color: #08164c; font-weight: 500; }
.roof-material summary::-webkit-details-marker { display: none; }
.roof-material summary span { font-size: 22px; font-weight: 400; }
.roof-material details[open] summary span { transform: rotate(45deg); }
.roof-material dl { margin: 0 0 12px; }
.roof-material dl > div { padding: 8px 0; font-size: 12px; line-height: 1.6; }
.roof-material dt { color: #60687a; }
.roof-material dd { margin: 0; color: #08164c; font-weight: 500; }
.roof-material a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 12px; color: #3458d9; font-size: 14px; font-weight: 600; text-decoration: none; }
.roof-material a span { font-size: 23px; }
.roof-material a:hover { color: #08164c; text-decoration: underline; }
.roof-material summary:focus-visible, .roof-material a:focus-visible { outline: 3px solid #3458d9; outline-offset: 3px; }
.roof-materials__note { margin: 24px 0 0; max-width: 85ch; color: #60687a; font-size: 12px; line-height: 1.7; }
@media (max-width: 950px) { .roof-materials__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
 .roof-materials { padding: 44px 20px; }
 .roof-materials__header { display: block; margin-bottom: 26px; }
 .roof-materials__header > p { margin-top: 18px; font-size: 15px; }
 .roof-materials h2 { font-size: 36px; }
 .roof-materials__grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
 .roof-material__body { padding: 18px 20px; }
 .roof-material__texture { min-height: 0; margin-bottom: 14px; }
 .roof-material__price { margin-bottom: 16px; }
}