.product-hero {
  padding-block: clamp(56px, 9vw, 120px) clamp(48px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 56px);
}
.product-hero__top { display: flex; align-items: center; gap: 16px; }
.product-hero__intro { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.product-hero__intro .lead { max-width: 640px; }
.product-hero__image { aspect-ratio: 16 / 9; min-height: 260px; }

.section--product { padding-block: clamp(72px, 10vw, 120px); }

.product-what__facts { margin-top: 8px; }

/* Gallery: uniform 16:10 cells, matching the supplied photography 1:1 with no
   cropping (a mixed-size mosaic was tried first, but that meant cropping most
   images to fit odd wide/tall cells - not worth it when the source set is
   already a consistent ratio). */
.gallery {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.gallery__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.gallery__trigger:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.gallery__thumb { width: 100%; aspect-ratio: 16 / 10; margin: 0; }
/* Worldspace's supplied gallery photography is 16:9, not 16:10 like oodlü's -
   override per page rather than force one ratio and crop one of the two sets. */
.gallery--16-9 .gallery__thumb { aspect-ratio: 16 / 9; }

/* Lightbox (native <dialog>, opened via JS; each trigger is a real <button> so the
   gallery itself - the grid of images/descriptions - is fully visible without JS) */
dialog.lightbox {
  border: 1px solid var(--moss-2);
  border-radius: 16px;
  background: var(--surface);
  color: var(--paper);
  padding: 0;
  max-width: min(920px, 92vw);
  width: 100%;
}
dialog.lightbox::backdrop { background: rgba(12, 13, 12, .8); }
.lightbox__inner { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.lightbox__close-row { display: flex; justify-content: flex-end; margin: 0; }
.lightbox__close {
  background: none;
  border: 1px solid var(--moss-2);
  color: var(--paper);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: border-color .2s;
}
.lightbox__close:hover { border-color: var(--hover-border); }
.lightbox__image { aspect-ratio: 16 / 10; width: 100%; margin: 0; }
.lightbox--16-9 .lightbox__image { aspect-ratio: 16 / 9; }

/* Built by our team */
.product-built__intro { max-width: 680px; margin-bottom: 24px; }