/*
  Chin Up Gallery: one stylesheet for both modules ("Before and After: Gallery" and "Before and After: Service").
  Markup and values follow the approved artboards (design/mockups, revision 3, theme.css). The pages these modules
  sit on are not design-system pages, so the kit's --ds-* tokens may not exist there: the module root defines its
  own --cg-* tokens with the kit's values as fallbacks (design-kit/design-system/styles.css), and every rule uses them.
  Type floor (design-kit/AGENTS.md): Italiana only on .cg-h1, .cg-h2, the lightbox title and the empty heading,
  never under 24px (--cg-text-xl); anything smaller is Jost.
  Breakpoints: phone under 600px, tablet 600 to 1023px, desktop 1024px and up.
  Selectors are cg- classes; theme rules that style bare elements (h2, p, a, button) lose to them. Resets sit in
  :where() so they never outrank anything.
*/

/* @tokens */
.cg-root {
  --cg-black: var(--ds-color-black, #000000);
  --cg-ink: var(--ds-color-ink, #0a0a0a);
  --cg-gold: var(--ds-color-gold, #d8b41d);
  --cg-gold-text: var(--ds-color-gold-text, #8a6f0a);
  --cg-cream: var(--ds-color-cream, #fdf8e0);
  --cg-surface: var(--ds-color-surface, #f7f7f7);
  --cg-button: var(--ds-color-button, #fafafa);
  --cg-muted: var(--ds-color-button-text, #333333);
  --cg-border: var(--ds-color-border, #cccccc);
  --cg-paper: var(--ds-color-paper, #ffffff);
  --cg-mist: var(--ds-color-mist, #d9d9d9);
  --cg-overlay: var(--ds-color-overlay, rgba(0, 0, 0, 0.62));
  --cg-font-heading: var(--ds-font-heading, 'Italiana', Georgia, serif);
  --cg-font-ui: var(--ds-font-ui, 'Jost', 'Helvetica Neue', Arial, sans-serif);
  --cg-font-body: var(--ds-font-body, 'Assistant', 'Helvetica Neue', Arial, sans-serif);
  --cg-weight-light: var(--ds-weight-light, 300);
  --cg-weight-regular: var(--ds-weight-regular, 400);
  --cg-weight-medium: var(--ds-weight-medium, 500);
  --cg-text-sm: var(--ds-text-sm, 0.875rem);
  --cg-text-base: var(--ds-text-base, 1rem);
  --cg-text-lg: var(--ds-text-lg, 1.25rem);
  --cg-text-xl: var(--ds-text-xl, 1.5rem);
  --cg-text-2xl: var(--ds-text-2xl, clamp(1.875rem, 3.6vw, 2.75rem));
  --cg-text-3xl: var(--ds-text-3xl, clamp(2.25rem, 5vw, 3.4375rem));
  --cg-space-xs: var(--ds-space-xs, 0.5rem);
  --cg-space-sm: var(--ds-space-sm, 1rem);
  --cg-space-md: var(--ds-space-md, 1.5rem);
  --cg-space-lg: var(--ds-space-lg, 2.5rem);
  --cg-space-xl: var(--ds-space-xl, 4rem);
  --cg-space-section: var(--ds-space-section, clamp(3.5rem, 7vw, 6rem));
  --cg-line-tight: var(--ds-line-tight, 1.2);
  --cg-line-body: var(--ds-line-body, 1.6);
  --cg-letter-heading: var(--ds-letter-heading, 0.5px);
  --cg-letter-sub: var(--ds-letter-sub, 1px);
  --cg-letter-ui: var(--ds-letter-ui, 1.5px);
  --cg-letter-eyebrow: var(--ds-letter-eyebrow, 2px);
  --cg-width-container: var(--ds-width-container, 1200px);
  --cg-width-prose: var(--ds-width-prose, 62ch);
  --cg-shadow-offset: var(--ds-shadow-offset, -9px 9px 0 0 #f7f7f7);
  --cg-transition: var(--ds-transition-base, 0.2s ease);

  font-family: var(--cg-font-body);
  font-size: var(--cg-text-base);
  font-weight: var(--cg-weight-regular);
  line-height: var(--cg-line-body);
  color: var(--cg-ink);
  -webkit-font-smoothing: antialiased;
}

/* @reset: zero specificity, so any site rule can still adjust them */
:where(.cg-root) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.cg-root) :where(h1, h2, h3, p, figure, figcaption, ol, ul) { margin: 0; padding: 0; }
:where(.cg-root) :where(a) { color: inherit; text-decoration: none; }
:where(.cg-root) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.cg-root) :where(svg) { display: block; }

/* @shared */
.cg-wrap { width: 100%; max-width: var(--cg-width-container); margin-inline: auto; padding-inline: var(--cg-space-md); }
/* Visually hidden, read by screen readers and crawlers. Also the card's treatment line (cg-card-tx): in the service
   module and the gallery groups a heading already names the treatment, and out of flow it leaves no gap in the
   caption's grid. The lightbox shows it (cg-lb-tx, filled from the card's data-tx). */
.cg-vh, .cg-root .cg-card-tx { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cg-icon { flex: none; width: 28px; height: 14px; }
.cg-icon-sq { flex: none; width: 18px; height: 18px; }
.cg-root .cg-h1, .cg-root .cg-h2, .cg-lightbox .cg-lb-title, .cg-root .cg-empty-title {
  margin: 0;
  font-family: var(--cg-font-heading);
  font-weight: var(--cg-weight-regular);
  line-height: var(--cg-line-tight);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--cg-black);
}
.cg-root .cg-h1 { font-size: var(--cg-text-3xl); letter-spacing: var(--cg-letter-heading); }
.cg-root .cg-h2 { font-size: var(--cg-text-2xl); letter-spacing: var(--cg-letter-eyebrow); }
.cg-root .cg-eyebrow { display: block; margin: 0 0 var(--cg-space-xs); font-family: var(--cg-font-ui); font-size: var(--cg-text-lg); font-weight: var(--cg-weight-light); line-height: var(--cg-line-tight); letter-spacing: var(--cg-letter-eyebrow); text-transform: uppercase; color: var(--cg-gold-text); }
.cg-root .cg-lead { max-width: var(--cg-width-prose); margin: 0; text-wrap: pretty; }
.cg-root .cg-lead > p { margin: 0; }
.cg-root .cg-lead > p + p { margin-top: var(--cg-space-xs); }
.cg-root .cg-consent { max-width: var(--cg-width-prose); margin: 0; font-size: var(--cg-text-sm); line-height: var(--cg-line-body); color: var(--cg-muted); }

/* Buttons and the arrow link: the kit's .bb-btn, .bb-btn-gold, .bb-btn-outline and .bb-arrow-link. Focus: the kit's
   3px gold ring measures 2.0:1 on white, so a 2px black ring sits at the edge (21:1). */
.cg-root .cg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 12px 24px; font-family: var(--cg-font-body); font-size: var(--cg-text-base); font-weight: var(--cg-weight-regular); line-height: 1.1; letter-spacing: var(--cg-letter-ui); text-align: center; text-transform: uppercase; text-decoration: none; color: var(--cg-muted); background: var(--cg-button); border: 1px solid var(--cg-border); border-radius: 0; box-shadow: var(--cg-shadow-offset); cursor: pointer; transition: background var(--cg-transition), border-color var(--cg-transition), color var(--cg-transition); }
.cg-root .cg-btn:hover { background: var(--cg-paper); border-color: var(--cg-black); color: var(--cg-black); }
.cg-root .cg-btn-outline { border: 3px solid var(--cg-black); color: var(--cg-black); }
.cg-root .cg-btn-gold { padding-inline: 35px; letter-spacing: var(--cg-letter-eyebrow); background: var(--cg-gold); border-color: var(--cg-gold); color: var(--cg-black); }
.cg-root .cg-btn-gold:hover { background: var(--cg-black); border-color: var(--cg-black); color: var(--cg-gold); }
.cg-root .cg-btn:focus-visible { outline: 3px solid var(--cg-gold); outline-offset: 4px; box-shadow: var(--cg-shadow-offset), 0 0 0 2px var(--cg-black); }
.cg-root .cg-arrow-link { display: inline-flex; align-items: center; gap: var(--cg-space-sm); min-height: 44px; font-family: var(--cg-font-ui); font-size: var(--cg-text-base); font-weight: var(--cg-weight-regular); letter-spacing: var(--cg-letter-ui); text-transform: uppercase; text-decoration: none; color: var(--cg-black); }
.cg-root .cg-arrow-link:hover { color: var(--cg-black); }
.cg-root .cg-arrow-link .cg-icon { transition: transform var(--cg-transition); }
.cg-root .cg-arrow-link:hover .cg-icon { transform: translateX(6px); }
.cg-root .cg-arrow-link:focus-visible { outline: 3px solid var(--cg-gold); outline-offset: 4px; box-shadow: 0 0 0 2px var(--cg-black); }

/* @component Gallery intro */
.cg-intro { padding-block: var(--cg-space-xl) var(--cg-space-lg); }
.cg-root .cg-crumbs { display: flex; flex-wrap: wrap; gap: var(--cg-space-xs); margin: 0 0 var(--cg-space-md); padding: 0; list-style: none; font-family: var(--cg-font-ui); font-size: var(--cg-text-sm); letter-spacing: var(--cg-letter-ui); text-transform: uppercase; color: var(--cg-muted); }
.cg-root .cg-crumbs li { margin: 0; }
.cg-root .cg-crumbs li + li::before { content: '/'; margin-right: var(--cg-space-xs); color: var(--cg-border); }
.cg-root .cg-crumbs a { color: var(--cg-black); text-decoration: underline; text-underline-offset: 3px; }
.cg-root .cg-crumbs a:focus-visible { outline: 3px solid var(--cg-gold); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cg-black); }
.cg-intro .cg-lead { margin-top: var(--cg-space-md); }
.cg-intro .cg-consent { margin-top: var(--cg-space-sm); }

/* @component Browse layout: the rail in a left column on desktop and tablet (240px, 200px), one column on phones */
.cg-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--cg-space-lg); border-top: 1px solid var(--cg-mist); }
.cg-side, .cg-main { min-width: 0; }
.cg-main { padding-top: var(--cg-space-md); transition: opacity var(--cg-transition); }
/* While the script fetches another treatment (the in-place swap); the status line takes focus after it. */
.cg-main.is-loading { opacity: 0.6; }
.cg-root .cg-status-text:focus { outline: none; }

/* @component Filter rail: links to the service URLs; the current one carries aria-current="page". Sticky in its
   column below the site's sticky header (--cg-header-height, measured by the script), scrolling inside itself only
   if the window is shorter than the list. The 5px of padding, taken back by the negative margin, keeps the focus
   ring inside the rail's scroll box. */
.cg-rail { position: sticky; top: calc(var(--cg-header-height, 0px) + var(--cg-space-md)); max-height: calc(100vh - var(--cg-header-height, 0px) - 2 * var(--cg-space-md)); margin-inline: -5px; padding: var(--cg-space-md) 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cg-gold) var(--cg-surface); }
.cg-root .cg-rail-title { margin-bottom: var(--cg-space-sm); }
.cg-root .cg-rail-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cg-mist); }
.cg-root .cg-rail-list > li { margin: 0; border-bottom: 1px solid var(--cg-mist); }
.cg-root .cg-rail-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--cg-space-xs); min-height: 44px; padding: var(--cg-space-xs) var(--cg-space-sm); font-family: var(--cg-font-ui); font-size: var(--cg-text-sm); font-weight: var(--cg-weight-regular); line-height: var(--cg-line-tight); letter-spacing: var(--cg-letter-sub); text-transform: uppercase; text-decoration: none; color: var(--cg-ink); transition: background var(--cg-transition), color var(--cg-transition); }
.cg-root .cg-rail-link:hover { background: var(--cg-surface); color: var(--cg-black); }
.cg-root .cg-rail-link[aria-current="page"] { background: var(--cg-black); color: var(--cg-paper); }
.cg-root .cg-rail-link:focus-visible { z-index: 1; outline: 3px solid var(--cg-gold); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cg-black); }
.cg-rail-count { flex: none; font-weight: var(--cg-weight-medium); font-variant-numeric: tabular-nums; color: var(--cg-gold-text); }
.cg-rail-link[aria-current="page"] .cg-rail-count { color: var(--cg-mist); }

/* @component Filter dropdown (phones): a native select in a GET form; the script hides the button. 16px text so
   phones do not zoom on focus; a 1px black edge, since a field needs a 3:1 boundary. */
.cg-pick { display: none; gap: var(--cg-space-xs); margin: 0; padding-top: var(--cg-space-md); }
.cg-root .cg-pick-label { margin-bottom: 0; }
.cg-pick-field { position: relative; display: block; }
.cg-root .cg-pick-select { display: block; width: 100%; min-height: 48px; margin: 0; padding: var(--cg-space-xs) var(--cg-space-xl) var(--cg-space-xs) var(--cg-space-sm); font-family: var(--cg-font-ui); font-size: var(--cg-text-base); font-weight: var(--cg-weight-regular); line-height: var(--cg-line-tight); color: var(--cg-black); background: var(--cg-paper); border: 1px solid var(--cg-black); border-radius: 0; box-shadow: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.cg-root .cg-pick-select:focus-visible { outline: 3px solid var(--cg-gold); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cg-black); }
.cg-pick-icon { position: absolute; top: 50%; right: var(--cg-space-sm); width: 14px; height: 8px; color: var(--cg-black); transform: translateY(-50%); pointer-events: none; }
.cg-root .cg-pick-go { justify-self: start; }
.cg-root .cg-pick-go[hidden] { display: none; }

/* @component Status line */
.cg-root .cg-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cg-space-xs) var(--cg-space-sm); min-height: 1.6em; margin: 0; }
.cg-root .cg-reset { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--cg-font-ui); font-size: var(--cg-text-sm); letter-spacing: var(--cg-letter-ui); text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: var(--cg-black); }
.cg-root .cg-reset:focus-visible { outline: 3px solid var(--cg-gold); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cg-black); }

@media (max-width: 1023px) {
  .cg-layout { grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--cg-space-md); }
  .cg-root .cg-rail-link { padding-inline: var(--cg-space-xs); }
}
@media (max-width: 599px) {
  .cg-layout { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .cg-rail { display: none; }
  .cg-pick { display: grid; }
  .cg-main { padding-top: var(--cg-space-sm); }
}

/* @component Group (one service). On the hub the "See more" link shows only when the group holds more cases than
   its preview row shows at that width (is-more-d on desktop, is-more-m below 1024px). */
.cg-groups { padding-bottom: var(--cg-space-section); }
.cg-group { padding-top: var(--cg-space-xl); }
.cg-group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--cg-space-sm) var(--cg-space-lg); padding-bottom: var(--cg-space-md); border-bottom: 1px solid var(--cg-mist); }
.cg-root .cg-group-meta { margin: var(--cg-space-xs) 0 0; font-family: var(--cg-font-ui); font-size: var(--cg-text-sm); font-weight: var(--cg-weight-medium); line-height: 1.4; letter-spacing: var(--cg-letter-eyebrow); text-transform: uppercase; color: var(--cg-gold-text); }
/* The treatment's own description (the gallery-service term), one plain line under the photo count on the hub. */
.cg-root .cg-group-desc { max-width: var(--cg-width-prose); margin: var(--cg-space-xs) 0 0; font-size: var(--cg-text-sm); line-height: var(--cg-line-body); color: var(--cg-muted); }
.cg-group-foot { margin-top: var(--cg-space-lg); }
.cg-root .cg-group-more, .cg-root .cg-load-more { display: none; }
.cg-group.is-more-d .cg-group-more, .cg-gallery.is-enhanced .cg-load-more:not([hidden]) { display: inline-flex; }
@media (max-width: 1023px) {
  .cg-group-head { grid-template-columns: minmax(0, 1fr); }
  .cg-group.is-more-d .cg-group-more { display: none; }
  .cg-group.is-more-m .cg-group-more { display: inline-flex; }
}

/* @component Case grid: 3 across on desktop and 2 on tablet beside the rail, 1 on phones. On the hub the preview row
   is 3, 2 and 2 cards. Cards past the first step carry is-more and wait for "Show more" (only with the script,
   so without it every case shows). */
.cg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cg-space-lg) var(--cg-space-md); margin-top: var(--cg-space-lg); }
.cg-gallery.is-enhanced .cg-card.is-more { display: none; }
@media (max-width: 1023px) {
  .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-grid.is-preview > .cg-card:nth-child(n+3) { display: none; }
}
@media (max-width: 599px) {
  .cg-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cg-space-lg); }
}

/* @component Case card: the photo in a 7:5 frame on the matte (the composite filling it when its shape is close, the
   before and after frames as a pair for other shapes, else the composite whole), Before and After under the halves,
   the label, an optional note, the treatment line when it differs (hidden, see .cg-vh). */
.cg-root .cg-card { display: grid; align-content: start; gap: var(--cg-space-xs); min-width: 0; margin: 0; }
.cg-root .cg-card-media { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; transition: transform var(--cg-transition), box-shadow var(--cg-transition); }
.cg-root .cg-card-media:hover { transform: translate(4px, -4px); box-shadow: -9px 9px 0 0 var(--cg-gold); }
.cg-root .cg-card-media:focus-visible { outline: 3px solid var(--cg-gold); outline-offset: 2px; box-shadow: 0 0 0 2px var(--cg-black); }
.cg-frame { display: grid; place-items: center; aspect-ratio: 7 / 5; overflow: hidden; background: var(--cg-surface); }
.cg-root .cg-frame > img { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; }
/* A composite close to 7:5 (ratio 1.20 to 1.70, is-fit) fills the frame, cropped a little at the centre, so a row of
   cards lines up; any other shape stays whole and letterboxed. The lightbox always shows the whole photo. */
.cg-root .cg-card.is-fit .cg-frame > img { object-fit: cover; object-position: center; }
/* Any other shape cut on the seam (is-pair): the before and after frames side by side, each filling its half from the
   centre, 2px of paper between them. */
.cg-root .cg-frame.is-pair { grid-template: minmax(0, 1fr) / repeat(2, minmax(0, 1fr)); place-items: stretch; gap: 2px; background: var(--cg-paper); }
.cg-root .cg-frame.is-pair > img { min-width: 0; min-height: 0; object-fit: cover; object-position: center; }
.cg-root .cg-halves { display: grid; grid-template-columns: 1fr 1fr; margin: 0; text-align: center; font-family: var(--cg-font-ui); font-size: var(--cg-text-sm); line-height: var(--cg-line-body); letter-spacing: var(--cg-letter-ui); text-transform: uppercase; color: var(--cg-muted); }
.cg-root .cg-halves.is-stacked { grid-template-columns: 1fr; text-align: left; text-transform: none; letter-spacing: 0; font-family: var(--cg-font-body); }
.cg-root .cg-card figcaption { display: grid; gap: 4px; margin-top: 4px; }
.cg-root .cg-card-title { margin: 0; font-family: var(--cg-font-ui); font-size: var(--cg-text-sm); font-weight: var(--cg-weight-medium); line-height: 1.4; letter-spacing: var(--cg-letter-eyebrow); text-transform: uppercase; text-wrap: balance; color: var(--cg-black); }
.cg-root .cg-card-note { margin: 0; font-size: var(--cg-text-sm); line-height: var(--cg-line-body); color: var(--cg-muted); text-wrap: pretty; }

/* @component Empty panel: a service URL with nothing to show (served with a 404 status) */
.cg-root .cg-empty { display: grid; justify-items: start; gap: var(--cg-space-sm); max-width: 760px; margin-block: var(--cg-space-xl) var(--cg-space-section); padding: var(--cg-space-lg); background: var(--cg-cream); }
.cg-root .cg-empty-title { font-size: var(--cg-text-xl); letter-spacing: var(--cg-letter-sub); }
.cg-root .cg-empty p { max-width: var(--cg-width-prose); margin: 0; }
.cg-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cg-space-md) var(--cg-space-lg); margin-top: var(--cg-space-xs); }

/* @component Closing band */
.cg-closing { padding-block: var(--cg-space-section); background: var(--cg-black); color: var(--cg-paper); }
.cg-closing-inner { display: grid; justify-items: start; gap: var(--cg-space-md); }
.cg-root .cg-closing .cg-h2 { max-width: 760px; color: var(--cg-paper); }
.cg-root .cg-closing p { max-width: var(--cg-width-prose); margin: 0; color: var(--cg-surface); }
.cg-root .cg-closing .cg-btn:focus-visible { outline-color: var(--cg-paper); box-shadow: none; }

/* @component Service module: up to four cases, two by two on desktop and tablet, the first two on phones (the
   rest sit behind "See more", printed only when the treatment has more cases than the module shows). Its own surface band inside the row; the photo matte is paper on it. */
.cg-module { padding: var(--cg-space-section) var(--cg-space-md); background: var(--cg-surface); }
.cg-module-head { margin-bottom: var(--cg-space-lg); }
.cg-module-head .cg-lead { margin-top: var(--cg-space-sm); }
.cg-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cg-space-lg) var(--cg-space-md); }
/* Exactly three cards (a treatment with three people who fit): one row of three on desktop, so the grid has no gap. */
@media (min-width: 1024px) { .cg-module-grid.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cg-module .cg-frame { background: var(--cg-paper); }
.cg-module-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cg-space-sm) var(--cg-space-lg); margin-top: var(--cg-space-lg); padding-top: var(--cg-space-md); border-top: 1px solid var(--cg-mist); }
@media (max-width: 599px) {
  .cg-module { padding-inline: var(--cg-space-sm); }
  .cg-module-grid { grid-template-columns: minmax(0, 1fr); }
  .cg-module-grid > .cg-card:nth-child(n+3) { display: none; }
  .cg-module-foot { flex-direction: column; align-items: flex-start; }
}
.cg-module-note { padding: var(--cg-space-md); font-family: var(--cg-font-ui); font-size: var(--cg-text-sm); background: var(--cg-cream); }

/* @component Lightbox: a native dialog on black; the photo keeps its own ratio (--cg-ratio, set by the script).
   Never wider or taller than the screen: on a phone, a page that is wider than the screen until its delayed scripts
   run (a service page's reviews slider) widens the area a fixed element fills, and the dialog with it; 100vw and
   100dvh stay the screen's size. */
.cg-lightbox { width: 100%; max-width: 100vw; height: 100%; max-height: 100vh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--cg-black); color: var(--cg-paper); overflow: auto; }
.cg-lightbox::backdrop { background: var(--cg-overlay); }
.cg-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: cg-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cg-fade { from { opacity: 0; } to { opacity: 1; } }
.cg-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--cg-space-sm); padding: var(--cg-space-sm) var(--cg-space-md); }
.cg-lightbox .cg-lb-count { margin: 0; font-family: var(--cg-font-ui); font-size: var(--cg-text-sm); letter-spacing: var(--cg-letter-ui); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--cg-mist); }
.cg-lightbox .cg-lb-btn { display: inline-grid; place-items: center; width: 56px; height: 56px; min-height: 0; margin: 0; padding: 0; color: var(--cg-paper); background: transparent; border: 1px solid var(--cg-muted); border-radius: 0; box-shadow: none; cursor: pointer; transition: border-color var(--cg-transition), color var(--cg-transition); }
.cg-lightbox .cg-lb-btn:hover { color: var(--cg-gold); background: transparent; border-color: var(--cg-gold); }
.cg-lightbox .cg-lb-btn:focus-visible { outline: 3px solid var(--cg-paper); outline-offset: 2px; }
.cg-lightbox .cg-lb-btn:disabled { opacity: 0.35; cursor: default; color: var(--cg-paper); border-color: var(--cg-muted); }
.cg-lightbox .cg-lb-close { width: 44px; height: 44px; }
.cg-lb-stage { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-areas: "prev photo next"; align-items: center; gap: var(--cg-space-md); min-height: 0; padding-inline: var(--cg-space-md); }
.cg-lb-prev { grid-area: prev; }
.cg-lb-next { grid-area: next; }
.cg-lightbox .cg-lb-figure { display: grid; justify-items: center; gap: var(--cg-space-xs); min-width: 0; margin: 0; grid-area: photo; }
.cg-lb-photo { width: min(100%, calc((100dvh - 390px) * var(--cg-ratio, 1.5))); aspect-ratio: var(--cg-ratio, 1.5); background: var(--cg-muted); }
.cg-lightbox .cg-lb-photo img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.cg-lightbox .cg-lb-figure .cg-halves { width: min(100%, calc((100dvh - 390px) * var(--cg-ratio, 1.5))); color: var(--cg-mist); }
.cg-lb-caption { display: grid; justify-items: center; gap: var(--cg-space-xs); max-width: var(--cg-width-prose); margin-inline: auto; padding: var(--cg-space-md); text-align: center; }
.cg-lightbox .cg-lb-title { font-size: var(--cg-text-xl); letter-spacing: var(--cg-letter-sub); color: var(--cg-paper); }
.cg-lightbox .cg-lb-note, .cg-lightbox .cg-lb-desc { margin: 0; font-size: var(--cg-text-sm); color: var(--cg-mist); }
.cg-lightbox .cg-lb-tx { margin: 0; font-size: var(--cg-text-sm); color: var(--cg-gold); }
.cg-lightbox .cg-lb-note[hidden], .cg-lightbox .cg-lb-desc[hidden], .cg-lightbox .cg-lb-tx[hidden], .cg-lightbox .cg-lb-link[hidden] { display: none; }
.cg-lightbox .cg-arrow-link { color: var(--cg-paper); }
.cg-lightbox .cg-arrow-link:hover { color: var(--cg-gold); }
.cg-lightbox .cg-arrow-link:focus-visible { outline-color: var(--cg-paper); box-shadow: none; }
.cg-lightbox .cg-consent { color: var(--cg-mist); }
@media (max-width: 599px) {
  .cg-lightbox[open] { grid-template-rows: auto auto auto; align-content: start; }
  .cg-lb-stage { grid-template-columns: 1fr 1fr; grid-template-areas: "photo photo" "prev next"; gap: var(--cg-space-sm); padding-inline: var(--cg-space-sm); }
  .cg-lb-prev { justify-self: start; }
  .cg-lb-next { justify-self: end; }
  .cg-lb-photo, .cg-lightbox .cg-lb-figure .cg-halves { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cg-lightbox[open] { animation: none; }
  .cg-main, .cg-root .cg-card-media, .cg-root .cg-rail-link, .cg-lightbox .cg-lb-btn, .cg-root .cg-btn, .cg-root .cg-arrow-link .cg-icon { transition: none; }
  .cg-root .cg-card-media:hover, .cg-root .cg-arrow-link:hover .cg-icon { transform: none; }
}