.gallery-open { overflow: hidden; }
.product-gallery-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px 0; }
.product-gallery-modal[hidden] { display: none; }
.gallery-backdrop { position: absolute; inset: 0; border: 0; background: rgba(12, 15, 13, 0.88); }
.gallery-dialog { position: relative; width: 100%; color: #fff; }
.gallery-viewport { width: 100%; overflow: hidden; }
.gallery-track { display: grid; grid-template-columns: 25% 50% 25%; align-items: center; width: 100%; }
.gallery-slide { height: min(68vh, 660px); padding: 0; border: 0; background: #202420; cursor: pointer; opacity: 0.42; transform: scale(0.88); transition: opacity 0.2s ease, transform 0.2s ease; }
.gallery-slide.is-current { opacity: 1; transform: scale(1); }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-close, .gallery-arrow { position: absolute; z-index: 3; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(20, 24, 21, 0.78); cursor: pointer; }
.gallery-close { top: -12px; right: 24px; width: 46px; height: 46px; font-size: 28px; }
.gallery-arrow { top: 34%; width: 52px; height: 52px; font-size: 22px; }
.gallery-prev { left: calc(25% - 26px); }
.gallery-next { right: calc(25% - 26px); }
.gallery-caption { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 50%; margin: 0 auto; padding: 20px 24px; background: #fff; color: var(--ink); }
.gallery-caption span { color: var(--orange); font-size: 12px; font-weight: 900; }
.gallery-caption h2 { margin: 5px 0 4px; font-size: 25px; }
.gallery-caption p { margin: 0; color: var(--muted); }
.catalog-card { cursor: pointer; }
.catalog-card:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.catalog-hero { background: linear-gradient(100deg, rgba(20, 25, 22, 0.95), rgba(49, 92, 73, 0.78)), url("assets/real-photos/materials.jpg") center / cover; }

@media (max-width: 760px) {
  .product-gallery-modal { padding: 12px 0; }
  .gallery-track { grid-template-columns: 12% 76% 12%; }
  .gallery-slide { height: 58vh; transform: scale(0.82); }
  .gallery-caption { align-items: stretch; flex-direction: column; width: 76%; padding: 16px; }
  .gallery-caption h2 { font-size: 21px; }
  .gallery-prev { left: 7px; }
  .gallery-next { right: 7px; }
  .gallery-arrow { top: 31%; width: 42px; height: 42px; }
  .gallery-close { top: -6px; right: 12px; }
}