.materials-section { background: var(--cream-2); }
.materials-table {
    background: white; border-radius: 18px; overflow: hidden;
    border: 1px solid #eceae2;
    box-shadow: 0 4px 16px rgba(26,37,32,0.05);
    margin-bottom: 24px;
}
.material-row {
    display: grid; grid-template-columns: 1.3fr 1.4fr 1.5fr 0.9fr; gap: 20px;
    padding: 18px 24px; border-bottom: 1px solid #f2efe7;
    font-size: 0.92rem; color: #444; line-height: 1.55;
    align-items: center;
}
.material-row:last-child { border-bottom: none; }
.material-head { background: var(--charbon); color: white; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; padding: 14px 24px; }
.material-head strong { color: white; font-weight: 700; }
.material-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.material-name strong { color: var(--charbon); font-size: 0.95rem; font-weight: 600; display: block; width: 100%; margin-top: 4px; }
.material-name em { color: var(--bronze); font-size: 0.78rem; font-style: normal; font-weight: 600; letter-spacing: 0.3px; }
.mat-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.materials-note {
    background: linear-gradient(135deg, rgba(138,109,59,0.08), rgba(138,109,59,0.02));
    border-left: 4px solid var(--bronze); border-radius: 10px;
    padding: 16px 22px;
    display: flex; gap: 14px; align-items: flex-start;
}
.materials-note i { color: var(--bronze); font-size: 1.2rem; flex-shrink: 0; margin-top: 3px; }
.materials-note p { margin: 0; color: var(--charbon); line-height: 1.6; font-size: 0.94rem; }

@media (max-width: 820px) {
    .material-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
    .material-head { display: none; }
    .material-row > div { padding: 4px 0; }
    .material-row > div::before {
        content: attr(data-lbl); display: block; font-size: 0.72rem;
        letter-spacing: 1px; text-transform: uppercase; color: var(--bronze);
        font-weight: 700; margin-bottom: 4px;
    }
}