/* LATVERA lux galleries (B14, lane D): #galleries (the hub) and #gallery/<id> (one dominant image at a time).
 * Scoped to #galleryDialog.gn-shell (GRAMMAR §0); gallery-navigation.js / product-gallery.js are untouched — their
 * markup is aligned here and completed by lux/routes.js (record kinds, the CONTOUR note, the counter and arrows).
 * Archetypes: stacked full-bleed house cards (hub) and the activities track
 * (ref:journey/desktop/frames/058_y12395.jpg – 066_y14195.jpg; O3 §2.10(5)). */

#galleryDialog.gn-shell {
  --gn-gutter:var(--lux-edge);
  /* The chrome above a product track, in fixed roles, so the track can take the rest of the first viewport (D-M2):
   * the wayfinding row (24u + a 44 px link) and the opener (30u + the name line + 30u); the collection row is 44 px. */
  --lux-gn-top:calc(24 * var(--lux-unit) + 44px);
  --lux-gn-head:calc(60 * var(--lux-unit) + var(--lux-fs-name) * .93);
  background:var(--lux-ground); scrollbar-color:var(--lux-taupe) var(--lux-ground);
}
#galleryDialog.gn-shell::backdrop { background:var(--lux-ground); }
#galleryDialog.gn-shell :focus-visible { outline:2px solid var(--cream); outline-offset:3px; box-shadow:0 0 0 5px var(--ground); }
#galleryDialog.gn-shell #gn-title:focus-visible { outline:none; box-shadow:none; }

/* ── Top row: a quiet wayfinding line that scrolls away; the close control is the "Close ×" pill ─────────────────── */
/* No slash label (GRAMMAR §3.2 "never a slash label"; the catalog dropped its own, audit D2-m5): "LATVERA / Galleries" is the
 * same link as "All collections" (both open #galleries), so it leaves, and "All collections" is the one small link, at the
 * text edge where the label stood (removed-strings.json B14). On the hub, which hides that link, the row is empty space. */
#galleryDialog.gn-shell .gn-shell-top {
  position:static; z-index:auto; box-sizing:border-box; height:var(--lux-gn-top); min-height:0; padding:calc(24 * var(--lux-unit)) var(--lux-edge) 0; gap:24px;
  justify-content:flex-start; background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
#galleryDialog.gn-shell .gn-shell-top > a[data-gallery-route="#galleries"] { display:none; }
#galleryDialog.gn-shell .gn-shell-top > a {
  display:inline-flex; align-items:baseline; min-height:44px; padding-top:13px;
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
#galleryDialog.gn-shell .gn-shell-top > a span { margin-left:.35em; font-size:inherit; letter-spacing:inherit; color:var(--lux-taupe); }
#galleryDialog.gn-shell .gn-shell-top > div { gap:24px; }
#galleryDialog.gn-shell .gn-shell-top .gn-all-link {
  position:relative; min-height:44px; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#galleryDialog.gn-shell .gn-shell-top .gn-all-link::after {
  content:""; position:absolute; left:0; right:0; bottom:12px; height:1px; background:currentColor;
  transform-origin:0 50%; transition:transform .6s var(--lux-ease-out);
}
/* The Menu pill's geometry (GRAMMAR §8.14 Close; one × per overlay, §8.2): bottom-centre, 24 px up, 121.3 × 48. */
#galleryDialog.gn-shell .gn-shell-top [data-gn-close] {
  position:fixed; z-index:30; left:50%; bottom:24px; translate:-50% 0;
  display:inline-flex; align-items:center; justify-content:space-between; gap:24px; box-sizing:border-box;
  width:121.3px; height:48px; min-height:0; padding:0 22px; border:0; border-radius:999px;
  background:var(--lux-cream); color:var(--ink); font-size:14px; line-height:1.25; letter-spacing:0;
  transition:background-color .2s var(--ease);
}
#galleryDialog.gn-shell .gn-shell-top [data-gn-close]:focus-visible { border-radius:999px; }
#galleryDialog.gn-shell .gn-shell-top [data-gn-close] span {
  display:inline; width:auto; height:auto; border:0; border-radius:0; background:none; color:inherit;
  font-size:19px; font-weight:400; line-height:1; transition:none;
}

/* ── Openers ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
#galleryDialog.gn-shell .gn-intro {
  display:block; padding:var(--lux-close) var(--lux-edge) calc(120 * var(--lux-unit));
}
#galleryDialog.gn-shell .gn-intro h1 {
  margin:0; font-size:var(--lux-fs-mega); line-height:.94; letter-spacing:-.06em; font-weight:400; color:var(--lux-cream);
}
/* Product opener in one line (D-M2): the name at the edge; the descriptor and "Design your space" on its baseline from
 * 50 % (GRAMMAR §4 opener row: lead at the edge ∣ caption or control at 50 %). Its height is fixed (--lux-gn-head). */
#galleryDialog.gn-shell .gn-intro--product {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); align-items:end; align-items:last baseline; gap:0;
  box-sizing:border-box; height:var(--lux-gn-head); padding:calc(30 * var(--lux-unit)) var(--lux-edge);
}
#galleryDialog.gn-shell .gn-intro--product > div { display:contents; }
#galleryDialog.gn-shell .gn-intro--product h1 { grid-column:1; grid-row:1; font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em; }
#galleryDialog.gn-shell .gn-product-description {
  grid-column:2; grid-row:1; justify-self:start; margin:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#galleryDialog.gn-shell .gn-studio-link {
  position:relative; grid-column:2; grid-row:1; justify-self:end; gap:.35em; min-height:44px; margin:0; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-cream);
}
#galleryDialog.gn-shell .gn-studio-link::after,
#galleryDialog.gn-shell .pg-endnote .pg-text-link::after {
  content:""; position:absolute; left:0; right:0; bottom:12px; height:1px; background:currentColor;
  transform-origin:0 50%; transition:transform .6s var(--lux-ease-out);
}
#galleryDialog.gn-shell .gn-studio-link span,
#galleryDialog.gn-shell .pg-endnote .pg-text-link span {
  display:inline; width:auto; height:auto; border:0; border-radius:0; background:none; color:inherit;
  font-size:inherit; line-height:1; transform:none; transition:none;
}
/* Collection links: the small role, current in cream with a 1 px line; a wrapped row, never a horizontal scroller. */
#galleryDialog.gn-shell .gn-product-tabs {
  display:flex; flex-wrap:wrap; gap:0 calc(40 * var(--lux-unit)); min-height:44px; overflow:visible; padding:0 var(--lux-edge);
}
#galleryDialog.gn-shell .gn-product-tabs > a {
  min-height:44px; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe); transition:color .3s var(--lux-ease-ui);
}
#galleryDialog.gn-shell .gn-product-tabs > a::after { bottom:12px; transition:transform .3s var(--lux-ease-out); }
#galleryDialog.gn-shell .gn-product-tabs > a[aria-current="page"] { color:var(--lux-cream); }

/* ── Hub: the stacked house cards in flow — one full card per viewport in the 8 px frame (the reference's house cards,
 * ref:journey/desktop/frames/018_y4050.jpg; D-m8), the name mid-left and its count on the line under it, both over the
 * left-strong + bottom scrims, which carry them on every photograph at every desktop width (D-B1, contrast.mjs). ───── */
#galleryDialog.gn-shell .gn-hub-grid {
  display:grid; grid-template-columns:minmax(0, 1fr); column-gap:0; row-gap:8px;
  padding:0 8px calc(var(--lux-close) + 72px);
}
#galleryDialog.gn-shell .gn-hub-card {
  --lux-focus-offset:-10px;
  position:relative; display:block; min-width:0; height:calc(100svh - 16px); min-height:360px; margin:0; aspect-ratio:auto;
  border-radius:var(--radius); overflow:hidden; background:var(--lux-panel); isolation:isolate;
}
#galleryDialog.gn-shell .gn-hub-card:focus-visible { outline-offset:-10px; border-radius:var(--radius); }
#galleryDialog.gn-shell .gn-hub-card .gn-hub-composition {
  position:absolute; inset:0; aspect-ratio:auto; border-radius:0; background:var(--lux-panel);
}
#galleryDialog.gn-shell .gn-hub-card .gn-hub-composition::after {
  content:""; position:absolute; inset:0; background:var(--lux-scrim-left-strong), var(--lux-scrim-bottom); pointer-events:none;
}
#galleryDialog.gn-shell .gn-hub-card .gn-hub-image { width:100%; height:100%; object-fit:cover; transform:none; transition:none; }
#galleryDialog.gn-shell .gn-hub-caption {
  position:absolute; z-index:2; left:calc(var(--lux-edge) - 8px); right:calc(var(--lux-edge) - 8px); top:50%; translate:0 -50%;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:max(8px, calc(14 * var(--lux-unit))); padding:0;
}
#galleryDialog.gn-shell .gn-hub-caption h2 {
  margin:0; font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em; font-weight:400; color:var(--lux-cream);
}
#galleryDialog.gn-shell .gn-hub-caption > span[aria-hidden]:not(.lux-paren) { display:none; }
/* gallery-navigation.css:57 draws every caption span as a 44 px ring; the count is plain bracketed text. */
#galleryDialog.gn-shell .gn-hub-caption > .lux-paren {
  display:inline; flex:none; width:auto; height:auto; border:0; border-radius:0; background:none; place-items:normal;
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream); transform:none; transition:none;
}

/* ── Product gallery: a horizontal snap track on desktop pointers; each card one dominant image, its title and kind ── */
/* The track takes the rest of the first viewport under the fixed chrome, so the opener, one whole card, its caption and
 * the counter row are all in view when the route opens (D-M2; ref:journey/desktop/frames/058_y12395.jpg). */
#galleryDialog.gn-shell .pg { position:relative; padding:0 0 calc(var(--lux-close) + 72px); color:var(--lux-cream); overflow-x:clip; overflow-y:visible; }
#galleryDialog.gn-shell .pg-grid {
  display:flex; flex-direction:row; align-items:stretch; gap:8px; box-sizing:border-box; padding:8px;
  height:max(360px, calc(100svh - var(--lux-gn-top) - var(--lux-gn-head) - 44px)); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding-inline:8px; overscroll-behavior-x:contain; scrollbar-width:none;
}
#galleryDialog.gn-shell .pg-grid::-webkit-scrollbar { display:none; }
#galleryDialog.gn-shell .pg-card {
  display:flex; flex-direction:column; flex:0 0 min(calc(1558 * var(--lux-unit)), 82vw); height:auto; min-width:0; margin:0;
  scroll-snap-align:start;
}
#galleryDialog.gn-shell .pg-image-button {
  --lux-focus-offset:-10px;
  flex:1 1 auto; min-height:0; height:auto; aspect-ratio:auto; border-radius:var(--radius); background:var(--lux-panel);
}
#galleryDialog.gn-shell .pg-image-button:focus-visible { outline-offset:-10px; border-radius:var(--radius); }
#galleryDialog.gn-shell .pg-image-button img,
#galleryDialog.gn-shell .pg[data-pg-product="versa"] .pg-image-button img { object-fit:cover; transform:none; transition:none; }
#galleryDialog.gn-shell .pg-image-expand {
  right:calc(var(--lux-edge) - 8px); bottom:calc(var(--lux-edge) - 8px); width:44px; height:44px; border:0; border-radius:50%;
  background:var(--lux-cream); color:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; font-size:19px;
  transition:opacity .3s var(--lux-ease-ui), transform .3s var(--lux-ease-ui);
}
/* Caption under the image: its title in cream and its record's kind. The card's own number stays in the caption text for
 * screen readers and truth parity ("01 Title", truth.mjs (5)) and leaves the visual layer (.lux-sr, added by routes.js):
 * the chips carry the index, so the first viewport numbers the card once (B14 ".pg-image-number hidden"; audit D2-m4). */
#galleryDialog.gn-shell .pg-card figcaption {
  display:grid; grid-template-columns:minmax(0, 1fr); align-items:baseline; gap:0; flex:none;
  padding:calc(18 * var(--lux-unit)) calc(var(--lux-edge) - 8px) 0; color:var(--lux-cream);
}
#galleryDialog.gn-shell .pg-card figcaption .pg-image-number {
  min-width:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#galleryDialog.gn-shell .pg-card h4 {
  grid-column:1; margin:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; font-weight:400; color:var(--lux-cream);
}
/* The record's kind: the line right under the caption (a sibling of the figcaption, lux/routes.js), on its text edge. */
#galleryDialog.gn-shell .pg-card .lux-kind {
  flex:none; margin:0; padding:0 calc(var(--lux-edge) - 8px); font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#galleryDialog.gn-shell .pg-load-error { background:var(--lux-panel); font-size:var(--lux-fs-small); }
#galleryDialog.gn-shell .lux-gallery-note {
  max-width:calc(760 * var(--lux-unit)); margin:calc(40 * var(--lux-unit)) var(--lux-edge) 0; color:var(--lux-taupe);
}
#galleryDialog.gn-shell .pg-endnote {
  display:flex; margin:calc(40 * var(--lux-unit)) 0 0; padding:0 var(--lux-edge); font-size:var(--lux-fs-small); color:var(--lux-taupe);
}
#galleryDialog.gn-shell .pg-endnote .pg-text-link {
  position:relative; gap:.35em; min-height:44px; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-cream);
}

/* The counter row lux/routes.js inserts before the track (chips "01" "N", a 1 px progress line, previous / next discs) is
 * drawn at the right end of the collection row above it (D-M2), so the whole route reads in one viewport; in the DOM it
 * sits between the collection links and the cards, the order it is seen in (audit D2-M1). */
#galleryDialog.gn-shell .lux-gallery-controls {
  position:absolute; z-index:2; top:-44px; right:0; box-sizing:border-box; height:44px;
  display:flex; align-items:center; gap:24px; padding:0 var(--lux-edge);
}
#galleryDialog.gn-shell .lux-gallery-progress {
  position:relative; display:block; width:calc(240 * var(--lux-unit)); height:1px; background:var(--lux-hair); overflow:hidden;
}
#galleryDialog.gn-shell .lux-gallery-progress > span {
  position:absolute; inset:0; background:var(--lux-cream); transform-origin:0 50%; transform:scaleX(var(--lux-progress, 0));
  transition:transform .5s var(--lux-ease-ui);
}
#galleryDialog.gn-shell .lux-gallery-arrows { display:flex; gap:8px; margin-left:auto; }
#galleryDialog.gn-shell .lux-gallery-arrows .lux-disc { color:var(--ink); font-size:19px; }
#galleryDialog.gn-shell .lux-gallery-arrows .lux-disc[aria-disabled="true"] { border:1px solid var(--lux-chip-dim); background:transparent; color:var(--lux-cream); cursor:default; }

@media (hover:hover) and (pointer:fine) {
  #galleryDialog.gn-shell .gn-shell-top [data-gn-close]:hover { background:var(--lux-pill-hover); }
  #galleryDialog.gn-shell .gn-shell-top [data-gn-close]:hover span { background:none; color:inherit; }
  #galleryDialog.gn-shell .gn-product-tabs > a:hover { color:var(--lux-cream); }
  #galleryDialog.gn-shell .gn-hub-card:hover .gn-hub-image,
  #galleryDialog.gn-shell .pg-image-button:hover img { transform:none; }
  #galleryDialog.gn-shell .gn-studio-link:hover span { background:none; color:inherit; transform:none; }
  #galleryDialog.gn-shell .lux-gallery-arrows .lux-disc[aria-disabled="true"]:hover { background:transparent; }
  :where(html.is-motion) #galleryDialog.gn-shell :is(.gn-all-link, .gn-studio-link, .pg-endnote .pg-text-link):hover::after { transform-origin:100% 50%; transform:scaleX(0); }
}

/* ── Touch query (the owner's rule for work cards applies here too, V2 m9): a vertical list of dominant cards ────── */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  #galleryDialog.gn-shell .pg-grid {
    flex-direction:column; gap:40px; height:auto; padding:8px; overflow:visible; scroll-snap-type:none;
  }
  #galleryDialog.gn-shell .pg-card { flex:none; width:100%; height:auto; }
  #galleryDialog.gn-shell .pg-image-button { flex:none; aspect-ratio:1.4; }
  #galleryDialog.gn-shell .pg-image-expand { opacity:1; transform:none; }
  #galleryDialog.gn-shell .lux-gallery-controls { display:none; }
}
/* ≤ 900: the reference phone house card — the image at 1.4:1 in the frame, the name and count below it on the ground
 * (ref:journey/phone/frames/014_y2998.jpg; GRAMMAR §8.10 phone): no text on the photograph, so no scrim (D-B1). */
@media (max-width:900px) {
  #galleryDialog.gn-shell .gn-hub-grid { row-gap:70px; }
  #galleryDialog.gn-shell .gn-hub-card {
    height:auto; min-height:0; aspect-ratio:auto; border-radius:0; overflow:visible; background:none; isolation:auto;
  }
  #galleryDialog.gn-shell .gn-hub-card:focus-visible { outline-offset:3px; }
  #galleryDialog.gn-shell .gn-hub-card .gn-hub-composition {
    position:relative; inset:auto; aspect-ratio:1.4; border-radius:var(--radius); overflow:hidden;
  }
  #galleryDialog.gn-shell .gn-hub-card .gn-hub-composition::after { content:none; }
  #galleryDialog.gn-shell .gn-hub-caption {
    position:static; translate:none; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
    padding:20px calc(var(--lux-edge) - 8px) 0;
  }
  #galleryDialog.gn-shell .gn-hub-caption > .lux-paren { color:var(--lux-taupe); }
}

/* ── Phone (≤ 700) ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:700px) {
  #galleryDialog.gn-shell .gn-shell-top { height:auto; padding:12px var(--lux-edge) 0; }
  #galleryDialog.gn-shell .gn-shell-top > a span { display:inline; }
  #galleryDialog.gn-shell .gn-shell-top .gn-all-link { font-size:var(--lux-fs-small); }
  #galleryDialog.gn-shell .gn-shell-top [data-gn-close] {
    bottom:max(18px, env(safe-area-inset-bottom)); width:114.8px; height:46px; padding:0 20px; font-size:13px;
  }
  #galleryDialog.gn-shell .gn-intro { padding:var(--lux-close) var(--lux-edge) 40px; }
  #galleryDialog.gn-shell .gn-intro--product { display:block; height:auto; padding:60px var(--lux-edge) 24px; }
  #galleryDialog.gn-shell .gn-product-description { margin-top:12px; }
  #galleryDialog.gn-shell .gn-studio-link { margin-top:12px; }
  /* Two rows of three (audit D2-m7 a): a free wrap left CONTOUR alone on the second line at 390. */
  #galleryDialog.gn-shell .gn-product-tabs { display:grid; grid-template-columns:repeat(3, max-content); justify-content:start; gap:0 24px; }
  #galleryDialog.gn-shell .pg-card figcaption { padding:14px 16px 0; }
  #galleryDialog.gn-shell .pg-card .lux-kind { padding:0 16px; }
  #galleryDialog.gn-shell .pg-image-expand { right:16px; bottom:16px; }
  #galleryDialog.gn-shell .pg { padding-bottom:132px; }
  #galleryDialog.gn-shell .lux-gallery-note { max-width:none; margin-top:32px; }
  #galleryDialog.gn-shell .pg-endnote { margin-top:24px; }
  #galleryDialog.gn-shell .gn-hub-grid { padding-bottom:132px; }
}
@media (prefers-reduced-motion:reduce) {
  #galleryDialog.gn-shell, #galleryDialog.gn-shell .pg-grid { scroll-behavior:auto; }
}