/* Gallery owns all its layout and viewer styles. No legacy gallery selectors. */
.salon-gallery {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
  padding-block: clamp(64px, 7vw, 112px);
}
.salon-gallery__heading { max-width: 850px; margin-bottom: 32px; }
.salon-gallery__heading h2 {
  margin: 0;
  font: 400 clamp(34px, 4.3vw, 62px)/1.18 var(--serif);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.salon-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.salon-gallery__filters button {
  min-height: 48px;
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
}
.salon-gallery__filters button[aria-pressed="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.salon-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.salon-gallery__photo {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--brand);
  cursor: zoom-in;
}
.salon-gallery__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 250ms ease; }
.salon-gallery__photo:hover img { transform: scale(1.025); }
.salon-gallery [hidden], .photo-viewer [hidden] { display: none !important; }
.salon-gallery :focus-visible, .photo-viewer :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.salon-gallery__photo:focus-visible { outline-offset: -4px; }
.photo-viewer {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  padding: max(72px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  background: rgba(18, 19, 24, .97);
  color: white;
  overscroll-behavior: contain;
}
.photo-viewer:not([open]) { display: none; }
.photo-viewer[open] { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 24px; }
.photo-viewer::backdrop { background: #121318; }
.photo-viewer__stage { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; touch-action: pan-y pinch-zoom; }
.photo-viewer__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.photo-viewer button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff66; border-radius: 50%; background: transparent; color: white; cursor: pointer; font-size: 30px; line-height: 1; }
.photo-viewer button:hover { background: #ffffff1a; }
.photo-viewer button:disabled { opacity: .25; cursor: default; }
.photo-viewer__close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.photo-viewer__count { position: absolute; top: max(24px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); font-size: 15px; font-variant-numeric: tabular-nums; }
.photo-viewer__status { position: absolute; text-align: center; padding: 24px; }
.photo-viewer__original { position: absolute; top: 60%; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1800px) { .salon-gallery { width: min(1680px, calc(100% - 128px)); } }
@media (max-width: 1100px) { .salon-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .salon-gallery { width: calc(100% - 32px); }
  .salon-gallery__heading h2 { font-size: clamp(30px, 7vw, 46px); }
  .salon-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .salon-gallery__filters { gap: 0 18px; }
  .salon-gallery__filters button { font-size: 14px; }
  .photo-viewer[open] { grid-template-columns: 1fr; gap: 0; padding: 72px 12px max(76px, env(safe-area-inset-bottom)); }
  .photo-viewer__prev, .photo-viewer__next { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); }
  .photo-viewer__prev { left: calc(50% - 64px); }
  .photo-viewer__next { right: calc(50% - 64px); }
}
@media (prefers-reduced-motion: reduce) { .salon-gallery__photo img { transition: none; } }