.materials-showcase{overflow:hidden}
.materials-showcase-head,.materials-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}
.materials-showcase-head p,.materials-head p{max-width:620px}
.materials-viewport{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.materials-viewport::-webkit-scrollbar{display:none}
.materials-track,.materials-track.is-enhanced{display:block;width:max-content;animation:none!important;transform:none!important}
.materials-set{display:flex;gap:18px;padding:2px 5vw 18px}
.materials-slide{position:relative;flex:0 0 clamp(260px,28vw,360px);height:420px;margin:0;overflow:hidden;border:1px solid #e4e7ec;border-radius:20px;background:#fff;box-shadow:0 14px 38px rgba(7,26,82,.12);scroll-snap-align:center;cursor:zoom-in;transition:transform .25s ease,box-shadow .25s ease}
.materials-slide:hover,.materials-slide:focus-visible{transform:translateY(-5px);box-shadow:0 20px 48px rgba(7,26,82,.2);outline:3px solid rgba(0,167,255,.35);outline-offset:3px}
.materials-slide img{width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .35s ease}
.materials-slide:hover img{transform:scale(1.035)}
.materials-slide figcaption{position:absolute;right:12px;bottom:12px;left:12px;padding:12px 46px 12px 14px;border-radius:11px;color:#fff;background:rgba(7,26,82,.9);font-size:.9rem;font-weight:800;backdrop-filter:blur(8px)}
.materials-zoom-hint{position:absolute;right:22px;bottom:22px;display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#fff;color:#071a52;font-size:1rem;font-weight:900;box-shadow:0 5px 18px rgba(0,0,0,.25)}
.materials-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px auto 0;padding:0 16px}
.materials-control{display:inline-flex;min-width:44px;height:44px;align-items:center;justify-content:center;border:1px solid #d0d5dd;border-radius:999px;background:#fff;color:#071a52;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 7px 20px rgba(7,26,82,.09);transition:background .2s ease,color .2s ease,transform .2s ease}
.materials-control:hover,.materials-control:focus-visible{background:#071a52;color:#fff;transform:translateY(-2px);outline:none}
.materials-control.pause{min-width:116px;padding:0 18px}
.materials-counter{min-width:92px;color:#667085;font-size:.88rem;text-align:center}
.materials-lightbox[hidden]{display:none}
.materials-lightbox{position:fixed;z-index:10050;inset:0;display:grid;place-items:center;padding:24px;background:rgba(2,8,28,.9);backdrop-filter:blur(8px)}
.materials-lightbox-dialog{position:relative;width:min(100%,1050px);height:min(88vh,850px);display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.5)}
.materials-lightbox-image{width:100%;height:100%;min-height:0;object-fit:contain;background:#fff}
.materials-lightbox-caption{margin:0;padding:15px 72px;color:#fff;background:#071a52;font-weight:800;text-align:center}
.materials-lightbox-button{position:absolute;z-index:2;display:grid;width:48px;height:48px;place-items:center;border:0;border-radius:50%;background:rgba(7,26,82,.9);color:#fff;font-size:1.45rem;font-weight:900;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.materials-lightbox-button:hover,.materials-lightbox-button:focus-visible{background:#ef3e38;outline:3px solid rgba(255,255,255,.7)}
.materials-lightbox-close{top:16px;right:16px}
.materials-lightbox-prev,.materials-lightbox-next{top:50%;transform:translateY(-50%)}
.materials-lightbox-prev{left:16px}.materials-lightbox-next{right:16px}
body.materials-lightbox-open{overflow:hidden}
@media(max-width:860px){.materials-showcase-head,.materials-head{align-items:flex-start;flex-direction:column}.materials-slide{flex-basis:min(78vw,330px);height:380px}.materials-set{padding-inline:11vw}.materials-control.pause{min-width:100px}.materials-lightbox{padding:10px}.materials-lightbox-dialog{height:86vh;border-radius:15px}.materials-lightbox-button{width:42px;height:42px}.materials-lightbox-prev{left:8px}.materials-lightbox-next{right:8px}.materials-lightbox-close{top:8px;right:8px}.materials-lightbox-caption{padding:13px 54px;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){.materials-viewport{scroll-behavior:auto}.materials-slide,.materials-slide img,.materials-control{transition:none}}
