.materials-section { padding: 105px 0; background: #e7e5df; }
.products-page main > section:not(.page-hero):not(.catalog-section) { display: none; }
.catalog-section { padding: 96px 0 110px; background: #f4f1eb; }
.catalog-heading { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 34px; }.catalog-heading h2 { margin: 14px 0 0; max-width: 580px; }.catalog-heading h2 em { color: var(--red); font-style: normal; }.catalog-heading > p { max-width: 380px; margin: 0; color: var(--muted); }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid #cfd1cb; border-bottom: 1px solid #cfd1cb; color: #687178; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }.catalog-toolbar span:first-child { color: var(--ink); font-weight: 700; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 24px; }
.catalog-card { position: relative; display: flex; min-height: 360px; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #d5d5cf; border-radius: 8px; transition: transform .25s ease, box-shadow .25s ease; }.catalog-card:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(16,24,32,.15); }.catalog-card-image { position: relative; height: 180px; overflow: hidden; background: #e5e7e2; }.catalog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }.catalog-card:hover .catalog-card-image img { transform: scale(1.07); }.catalog-card-image::after { content: ''; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(16,24,32,.36)); }.catalog-number { position: absolute; z-index: 1; top: 13px; left: 15px; color: #fff; font: 600 .78rem 'Space Grotesk', sans-serif; text-shadow: 0 1px 5px rgba(0,0,0,.5); }.catalog-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px; }.catalog-category { color: var(--red); font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.catalog-card h3 { min-height: 48px; margin: 8px 0 8px; color: var(--ink); font-size: 1.08rem; line-height: 1.15; }.catalog-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.catalog-read-more { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 15px; color: var(--red); border: 0; border-top: 1px solid #e0e1dc; background: transparent; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-align: left; text-transform: uppercase; cursor: pointer; }.catalog-read-more span { font-size: 1.15rem; }
.catalog-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }.catalog-pagination button { min-width: 38px; height: 38px; border: 1px solid #bfc4bf; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }.catalog-pagination button:hover, .catalog-pagination button[aria-current="page"] { border-color: var(--red); background: var(--red); color: #fff; }.catalog-pagination button:disabled { cursor: not-allowed; opacity: .4; }
.product-modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(10,16,20,.75); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }.product-modal.is-open { opacity: 1; visibility: visible; }.product-modal-card { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; width: min(100%, 900px); max-height: min(720px, 90vh); overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.3); transform: translateY(18px); transition: transform .25s ease; }.product-modal.is-open .product-modal-card { transform: translateY(0); }.product-modal-image { min-height: 360px; background: #e5e7e2; }.product-modal-image img { width: 100%; height: 100%; object-fit: cover; }.product-modal-content { padding: 42px; }.product-modal-content .catalog-category { display: block; margin-bottom: 10px; }.product-modal-content h2 { margin: 0 0 18px; font-size: clamp(1.8rem, 4vw, 3.2rem); }.product-modal-content p { color: var(--muted); }.product-specs { display: grid; gap: 8px; margin: 24px 0; padding-top: 18px; border-top: 1px solid #d5d5cf; }.product-specs span { color: #596367; font-size: .82rem; line-height: 1.45; }.product-specs strong { color: var(--ink); }.product-modal-close { position: absolute; z-index: 2; top: 14px; right: 16px; width: 36px; height: 36px; border: 1px solid #aeb6b4; border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
@media (max-width: 1050px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .catalog-heading { display: block; }.catalog-heading > p { margin-top: 20px; }.catalog-grid { grid-template-columns: repeat(2, 1fr); }.product-modal-card { grid-template-columns: 1fr; }.product-modal-image { min-height: 240px; max-height: 280px; } }
@media (max-width: 500px) { .catalog-section { padding: 70px 0 80px; }.catalog-grid { grid-template-columns: 1fr; }.catalog-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }.product-modal { padding: 14px; }.product-modal-content { padding: 30px 22px; } }
.materials-heading { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 48px; }
.materials-heading h2 { max-width: 560px; margin: 15px 0 0; }
.materials-heading h2 em, .product-connect h2 em { color: var(--red); font-style: normal; }
.materials-heading > p { max-width: 360px; margin: 0; color: var(--muted); }
.materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.material-card { min-height: 255px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid #d5d5cf; border-radius: 8px; cursor: pointer; scroll-margin-top: 150px; transition: transform .25s ease, box-shadow .25s ease; }.material-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(16,24,32,.14); }
.material-card-accent { background: #e45243; color: #fff; border-color: #e45243; }.material-card-dark { background: #111820; color: #fff; border-color: #111820; }
.material-card > span { color: var(--red); font: 600 .82rem 'Space Grotesk', sans-serif; }.material-card-accent > span, .material-card-dark > span { color: var(--gold); }
.material-card h3 { max-width: 290px; margin: 20px 0 8px; font-size: 1.35rem; line-height: 1.12; }.material-card p { max-width: 320px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }.material-card-accent p, .material-card-dark p { color: #d6ddde; }
.material-card a { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 22px; padding-top: 12px; border-top: 1px solid rgba(16,24,32,.16); color: var(--red); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }.material-card-accent a, .material-card-dark a { color: var(--gold); border-color: rgba(255,255,255,.24); }.material-card a b { font-size: 1.1rem; }
.materials-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; color: var(--muted); font-size: .8rem; }.materials-extra strong { color: var(--ink); font-weight: 700; }
.product-connect { padding: 90px 0; background: var(--gold); }.product-connect-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }.product-connect h2 { max-width: 500px; }.product-connect-inner > div > p { max-width: 470px; color: #343d42; }.product-social-note { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }.product-social-note span { width: 100%; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.product-social-note a { padding: 9px 13px; border: 1px solid rgba(16,24,32,.35); border-radius: 6px; color: var(--ink); font-size: .78rem; font-weight: 700; }.product-social-note a:hover { color: #fff; background: var(--ink); }
@media (max-width: 820px) { .materials-heading { display: block; }.materials-heading > p { margin-top: 22px; }.materials-grid { grid-template-columns: repeat(2, 1fr); }.product-connect-inner { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 500px) { .materials-section, .product-connect { padding: 72px 0; }.materials-grid { grid-template-columns: 1fr; }.material-card { min-height: 225px; }.materials-extra { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.materials-extra span { grid-column: 1 / -1; }.product-social-note { gap: 10px; } }