.gallery-section {
  max-width: 1280px;
  margin: auto;
  padding: 110px 32px;
}

.gallery-heading {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 26px 70px;
  align-items: end;
  margin-bottom: 48px;
}

.gallery-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.gallery-heading h2 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.05em;
}

.gallery-heading > p:last-child {
  max-width: 500px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.gallery-category-heading {
  margin: 0 0 20px;
  border-bottom: 1px solid #33333a;
  scroll-margin-top: 110px;
}

.gallery-toggle {
  appearance: none;
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 4px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.gallery-toggle:hover h3,
.gallery-toggle:focus-visible h3 {
  color: var(--cyan);
}

.gallery-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.gallery-category-heading h3 {
  font-size: clamp(25px, 3vw, 38px);
  letter-spacing: -.035em;
}

.gallery-category-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.gallery-toggle-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan);
  font-size: 13px;
  font-weight: 800;
}

.gallery-toggle-label b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #3b3b43;
  border-radius: 50%;
  color: #fff;
  font-size: 19px;
  font-weight: 400;
  transition: transform .2s ease, background .2s ease;
}

.gallery-toggle[aria-expanded="true"] .gallery-toggle-label b {
  background: var(--cyan);
  color: #050507;
  transform: rotate(45deg);
}

.clothing-heading { margin-top: 78px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 235px;
  gap: 14px;
}

/* Ensure collapsed gallery panels stay hidden despite the grid display rule. */
.gallery-grid[hidden] {
  display: none;
}

.gallery-item {
  appearance: none;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid #29292e;
  border-radius: 4px;
  background: #0c0c0f;
  color: #fff;
  cursor: zoom-in;
}

.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

/* Keep the garment logo centred inside its wide thumbnail crop. */
.gallery-item.focus-selkirk img { object-position: center 88%; }

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.04);
  filter: brightness(.72);
}

.gallery-item span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 7px 10px;
  border: 1px solid #ffffff22;
  border-radius: 4px;
  background: #08080bd9;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(8px);
  transition: .25s ease;
}

.gallery-item:hover span,
.gallery-item:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  padding-left: 4px;
  border: 1px solid #ffffff66;
  border-radius: 50%;
  background: #08080bd9;
  color: #fff;
  font-size: 25px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease;
}

.video-item:hover .video-play,
.video-item:focus-visible .video-play {
  background: var(--cyan);
  color: #08080b;
  transform: translate(-50%, -50%) scale(1.08);
}

.lightbox {
  width: min(94vw, 1100px);
  max-height: 92vh;
  padding: 14px;
  border: 1px solid #3b3b43;
  border-radius: 8px;
  background: #09090c;
  color: #fff;
  box-shadow: 0 24px 90px #000;
}

.lightbox::backdrop { background: #000d; backdrop-filter: blur(5px); }
.lightbox img { display: block; max-width: 100%; max-height: 78vh; margin: auto; object-fit: contain; }
.lightbox video { display: none; width: 100%; max-height: 78vh; margin: auto; background: #000; object-fit: contain; }
.lightbox.show-video img { display: none; }
.lightbox.show-video video { display: block; }
.lightbox p { margin: 14px 48px 3px; text-align: center; color: #c9c9ce; font-size: 15px; }
.lightbox-close { position: absolute; top: 20px; right: 20px; z-index: 2; width: 42px; height: 42px; border: 1px solid #ffffff33; border-radius: 50%; background: #08080be8; color: #fff; font-size: 29px; line-height: 1; cursor: pointer; }

.gallery-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  border: 1px solid #ffffff24;
  color: #bfc0c7;
  text-align: center;
}

@media (max-width: 900px) {
  .gallery-heading { grid-template-columns: 1fr; gap: 22px; }
  .gallery-heading .eyebrow { grid-column: auto; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
}

@media (max-width: 600px) {
  .gallery-section { padding: 80px 20px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; gap: 8px; }
  .gallery-item.wide { grid-column: span 2; }
  .gallery-item.tall { grid-row: span 2; }
  .gallery-item span { left: 8px; bottom: 8px; padding: 5px 7px; font-size: 12px; opacity: 1; transform: none; }
  .gallery-toggle { align-items: flex-start; gap: 16px; }
  .gallery-toggle-label { font-size: 0; }
  .gallery-toggle-label b { font-size: 19px; }
  .clothing-heading { margin-top: 58px; }
  .lightbox { padding: 8px; }
  .lightbox p { margin-inline: 42px; }
}