/* A compact contact sheet beside the treatment: the selected photograph keeps its framing. */
.service-gallery { min-width: 0; max-width: 100%; margin-top: 1.75rem; }
.service-gallery-stage { position: relative; margin: 0; background: var(--graphite); overflow: hidden; }
.service-gallery-open { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; width: 100%; min-height: 44px; color: var(--graphite); touch-action: pan-y pinch-zoom; }
.service-gallery--hair .service-gallery-open { aspect-ratio: 3 / 2; }
.service-gallery-stage.is-portrait .service-gallery-open { aspect-ratio: 4 / 5; }
.service-gallery-open picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.service-gallery-open img { display: block; width: 100%; height: 100%; object-fit: contain; }
.service-gallery-expand { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; background: var(--frost-bright); color: var(--graphite); }
.service-gallery-open:hover .service-gallery-expand { color: var(--gold-text); }
.service-gallery-open:focus-visible { outline: 2px solid var(--gold-text); outline-offset: -3px; }
.service-gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 3.25rem; padding-block: 0.35rem; border-bottom: 1px solid var(--line); }
.service-gallery .service-gallery-caption { margin: 0; color: var(--graphite); font-size: 0.875rem; line-height: 1.4; }
.service-gallery-controls { display: flex; align-items: center; flex-shrink: 0; }
.service-gallery-controls button { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; color: var(--graphite); background: transparent; cursor: pointer; }
.service-gallery-controls button:hover { color: var(--gold-text); }
.service-gallery-previous .ui-icon { transform: rotate(180deg); }
.service-gallery-count { min-width: 3rem; color: var(--text-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: center; }
.service-gallery-thumbs { position: relative; display: flex; gap: 0.55rem; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0.8rem 0.15rem 0.55rem; scrollbar-width: thin; scrollbar-color: var(--silver-deep, #aaa) transparent; }
.service-gallery-thumbs button { flex: 0 0 3.75rem; display: block; width: 3.75rem; min-width: 44px; min-height: 44px; height: 3.75rem; padding: 2px; background: transparent; border: 1px solid transparent; cursor: pointer; opacity: 0.66; transition: opacity var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
.service-gallery-thumbs button[aria-pressed="true"] { border-color: var(--graphite); opacity: 1; }
.service-gallery-thumbs button:hover { opacity: 1; }
.service-gallery-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-gallery-thumbs .is-comparison img { object-fit: contain; background: var(--graphite); }
.service-gallery-controls button:focus-visible, .service-gallery-thumbs button:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 1px; }
.catalog-group.catalog-group--illustrated { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); }
.catalog-group--illustrated .catalog-group-heading { position: static; }
.catalog-group--illustrated .catalog-group-heading h2 { margin-top: 0; }
.service-guide { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.service-guide h3 { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.service-guide details { border-bottom: 1px solid var(--line); }
.service-guide summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding-block: 0.65rem; color: var(--graphite); font-size: 0.875rem; line-height: 1.4; list-style: none; cursor: pointer; }
.service-guide summary::-webkit-details-marker { display: none; }
.service-guide summary .ui-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.service-guide details[open] summary .ui-icon { transform: rotate(45deg); }
.service-guide summary:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.service-guide p { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.875rem; line-height: 1.65; }
.service-detail-gallery { margin-top: 3rem; max-width: 70rem; }
.service-detail-gallery h2 { font-size: clamp(1.75rem, 3vw, 2.8rem); font-weight: 300; }
.service-detail-gallery .service-gallery { max-width: 50rem; }
.photo-browse { display: flex; align-items: center; gap: 0.5rem; }
.photo-browse[hidden] { display: none; }
.photo-browse button { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; background: transparent; color: var(--frost-bright); border: 1px solid var(--line-on-dark, #777); cursor: pointer; }
.photo-browse [data-photo-previous] .ui-icon { transform: rotate(180deg); }
.photo-browse-count { min-width: 3rem; font-size: 0.8125rem; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) and (min-width: 768px) { .catalog-group.catalog-group--illustrated { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem; } }
@media (max-width: 767px) {
 .catalog-group.catalog-group--illustrated { display: block; }
 .service-gallery { margin-top: 1.25rem; }
 .service-gallery-open { aspect-ratio: 3 / 2; }
 .service-gallery-thumbs button { flex-basis: 3.4rem; width: 3.4rem; height: 3.4rem; }
 .service-gallery-toolbar { min-height: 3rem; }
 .photo-toolbar { flex-wrap: wrap; }
 .photo-browse { order: 3; flex: 1 0 100%; justify-content: center; }
 .service-guide { margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .service-gallery-thumbs button { transition: none; } }

/* The catalogue can become narrow through zoom while the viewport stays wide. */
@container catalog (max-width: 767px) {
 .catalog-group.catalog-group--illustrated { display: block; }
 .service-gallery { margin-top: 1.25rem; }
 .service-gallery-open { aspect-ratio: 3 / 2; }
 .service-gallery-thumbs button { flex-basis: 3.4rem; width: 3.4rem; height: 3.4rem; }
 .service-gallery-toolbar { min-height: 3rem; }
 .service-guide { margin-top: 1.5rem; }
}