/* LATVERA lux primitives: shared components of the rebuild (GRAMMAR §3, §5, §8, §9; BUILD-BRIEFS B0).
 * Every primitive sits under :where(<the rebuild roots>), so it weighs (0,1,0) and any area rule overrides it without
 * !important. Nothing here hides content: moving and hidden states belong to the components' own armed attributes.
 * The one exception to the (0,1,0) rule is the shared route chrome at the end, written once for every rebuilt
 * #detailDialog route (GRAMMAR §8.17 Close; BUILD-BRIEFS B10 "Dialog chrome"). */

/* ── Visually hidden ─────────────────────────────────────────────────────────────────────────────────────────────── */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-sr {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── Type roles (GRAMMAR §3.1: Host Grotesk 400, sentence case, no positive tracking) ───────────────────────────────── */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-mega {
  font-size:var(--lux-fs-mega); line-height:.94; letter-spacing:-.06em; font-weight:400; color:var(--lux-cream);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-name {
  font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em; font-weight:400; color:var(--lux-cream);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-lead {
  font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-taupe);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-title {
  font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-cream);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-sub {
  font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; font-weight:400; color:var(--lux-cream);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-small {
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; font-weight:400; color:var(--lux-cream);
}
/* A rise line is its own box, so a transform applies to it; inline-block keeps the markup's <br> the only break. */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-line {
  display:inline-block;
}

/* ── Pill button (GRAMMAR §8.1: the collection pill, one species site-wide) ────────────────────────────────────────── */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-pill {
  --lux-focus-r:999px;
  display:inline-flex; align-items:center; gap:12px; box-sizing:border-box; height:48px; padding:12px 18px;
  border:0; border-radius:999px; background:var(--lux-cream); color:var(--ink);
  font-size:var(--lux-fs-pill); line-height:1.25; letter-spacing:0; font-weight:400; text-decoration:none; white-space:nowrap;
  transition:background-color .2s var(--ease);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-pill-glyph {
  font-size:19px; line-height:1; transition:transform .2s var(--ease);
}

/* ── Icon button (GRAMMAR §8.2): 44 px cream disc; an empty disc draws its + from two 2 × 16 px bars ─────────────────── */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-disc {
  --lux-focus-r:50%;
  position:relative; display:inline-grid; place-items:center; box-sizing:border-box; width:44px; height:44px; padding:0;
  border:0; border-radius:50%; background:var(--lux-cream); color:var(--ink); line-height:1;
  transition:background-color .2s var(--ease);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-disc:empty::before,
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-disc:empty::after {
  content:""; grid-area:1/1; width:16px; height:2px; background:currentColor; transform:rotate(var(--lux-disc-turn, 0deg));
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-disc:empty::after {
  transform:rotate(calc(var(--lux-disc-turn, 0deg) + 90deg));
}

/* ── Underline link (GRAMMAR §8.4 L1): a 1 px bar in currentColor at the text's foot, 44 px hit height ───────────────── */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-link {
  --lux-link-pad:max(0px, calc((44px - 1lh) / 2));
  position:relative; display:inline-block; padding:var(--lux-link-pad) 0; border:0; background:none; color:inherit; text-decoration:none; text-align:left;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-link::after {
  content:""; position:absolute; left:0; right:0; bottom:var(--lux-link-pad); height:1px; background:currentColor;
  transform-origin:0 50%; transition:transform .6s var(--lux-ease-out);
}

/* ── Text roll (GRAMMAR §8.3): two copies in one grid cell; LatveraLux.roll() injects the aria-hidden copy ──────────── */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-roll {
  display:inline-grid; overflow:hidden; vertical-align:top; transition:color .5s var(--lux-ease-roll);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-roll > * {
  grid-area:1/1; transition:transform .5s var(--lux-ease-roll);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-roll > * + * {
  transform:translateY(110%);
}

/* ── Counter chips (GRAMMAR §8.5): two touching 36 px chips; numerator taupe, denominator cream .45 ────────────────── */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-chips {
  display:inline-flex; gap:1px;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-chips > * {
  --lux-focus-r:999px;
  position:relative; display:inline-grid; place-items:center; box-sizing:border-box; min-width:36px; height:36px; padding:0 8px;
  border:1px solid var(--lux-chip-dim); border-radius:999px; background:transparent; color:rgba(244,239,231,.7);
  font-size:var(--lux-fs-small); line-height:1; letter-spacing:-.015em; font-weight:400;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-chips > :first-child {
  border-color:var(--lux-taupe); color:var(--lux-cream);
}
/* The swap mask LatveraLux.chips() wraps around a chip's label (GRAMMAR §7.3 chip swap). */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-chip-mask {
  display:inline-grid; overflow:hidden; line-height:1.2;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-chip-mask > * {
  grid-area:1/1;
}
/* A chip that is a control keeps its 36 px circle and gets a 44 × 44 hit area. */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-chips > :is(button, a[href])::after {
  content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%, -50%); background:transparent;
}

/* ── Parenthetical (GRAMMAR §3.2, §8.6): brackets only, never a case change; the sentence modifier only on data categories ─ */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-paren {
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; font-weight:400; color:var(--lux-taupe);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-paren::before { content:"("; }
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-paren::after { content:")"; }
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-paren--sentence {
  display:inline-block; text-transform:lowercase;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-paren--sentence::first-letter {
  text-transform:uppercase;
}

/* ── Spec rows (GRAMMAR §8.8): stacked by default, short (one line) for ASAŞ models ────────────────────────────────── */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-row {
  display:block; padding:calc(14 * var(--lux-unit)) 0; border-bottom:1px solid var(--lux-hair);
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-row:last-child {
  border-bottom:0;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :is(.lux-row-label, .lux-row-value) {
  display:block; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; font-weight:400;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-row-label { color:var(--lux-cream); }
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-row-value { color:var(--lux-taupe); }
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-row--short {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-row--short .lux-row-value {
  color:var(--lux-cream); text-align:right;
}

/* ── Focus (GRAMMAR §9): one ring with the control's own radius; replaces the engine.css 6 px radius leak ───────────── */
/* The ring settings are per control and must NOT inherit (audit D4): a card's inset ring (−10 px, var(--radius)) would
 * otherwise reach every disc, pill and link inside the card, and a cream ring drawn 10 px inside a cream disc is invisible
 * (WCAG 2.4.7). Unset and non-inheriting, each control falls back to 3 px / 0. */
@property --lux-focus-r { syntax:'*'; inherits:false; }
@property --lux-focus-offset { syntax:'*'; inherits:false; }
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :is(.lux-card, .lux-activity) {
  --lux-focus-r:var(--radius); --lux-focus-offset:-10px;
}
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :focus-visible {
  outline:2px solid var(--cream); outline-offset:var(--lux-focus-offset, 3px); box-shadow:0 0 0 5px var(--ground);
}
/* The radius is the control's own, and only lux controls get one here (audit D7): a legacy control inside a rebuilt root
 * (the catalog, gallery, studio and project routes before lanes C/D restyle them) keeps the radius its own rules give it —
 * setting var(--lux-focus-r, 0) on every focusable squared #project-01's a.pill (99px → 0) on keyboard focus (V3-05). */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :where([class*="lux-"], .lux-chips > *):focus-visible {
  border-radius:var(--lux-focus-r, 0);
}
/* Beats catalog-experience.css `.lv-product :focus-visible{outline-offset:5px}` inside the product template. */
.lux-detail :focus-visible { outline-offset:var(--lux-focus-offset, 3px); }
/* Scroll clearance above the bottom-centre Menu / Close pill lane (the focusin nudge lives in the area scripts). */
:where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :is(a[href], button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-bottom:96px;
}

/* ── Hover (fine pointer only; motion states only under html.is-motion) ─────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine) {
  :where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :is(.lux-pill, .lux-disc):hover {
    background:var(--lux-pill-hover);
  }
  :where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-pill:hover .lux-pill-glyph {
    transform:translate(2px, -2px);
  }
  :where(html.is-motion) :where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-link:hover::after {
    transform-origin:100% 50%; transform:scaleX(0);
  }
  :where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :hover > .lux-roll {
    color:var(--lux-taupe);
  }
  :where(html.is-motion) :where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :hover > .lux-roll > :first-child {
    transform:translateY(-110%);
  }
  :where(html.is-motion) :where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :hover > .lux-roll > * + * {
    transform:translateY(0);
  }
}

/* ── Phone tree (GRAMMAR §1.2: fixed px, no u value inside it) ─────────────────────────────────────────────────────── */
@media (max-width:700px) {
  :where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) .lux-row {
    padding:14px 0;
  }
  :where([data-lux], .lux-detail, .lux-menu-sheet, #detailDialog .lv-catalog, #galleryDialog, #designStudio, #detailContent:has(> .selected-work-detail-hero), #detailContent:has(> .library-grid)) :is(a[href], button, input, select, textarea, summary, [tabindex]) {
    scroll-margin-bottom:84px;
  }
}

/* ── Shared route chrome (B0; GRAMMAR §8.17 Close; BUILD-BRIEFS B10 "Dialog chrome"; V1 M-9, AT-31) ──────────────────
 * Every rebuilt #detailDialog route shares one close control: the in-app .detail-top collapses to a sticky 0-height bar
 * and its [data-close] becomes the "Close ×" pill at the Menu pill's geometry. Publication documents keep their own
 * site bar (html[data-publication], V2 M10, V3-04), so this block never applies there. */
html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top {
  position:sticky; top:0; z-index:20; display:block; height:0; min-height:0; padding:0; border:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top::after {
  content:none;
}
/* The collapsed bar measures 0 px, and the app's own measurement then falls back to 88 px (catalog-experience.js:166-167,
 * `offsetHeight || 88`), which left the sticky catalog controls at 87 px with rows scrolling through the empty strip above
 * them (audit D8). The value is written inline on .lv-catalog, so only !important reaches it. Lanes C/D: the same 0 → 80
 * fallback feeds --pj-header (product-journey.js:201, 276) and the CONTOUR header offset (contour-experience.js:58). */
html:not([data-publication]) #detailDialog .lv-catalog {
  --lv-dialog-top:0px !important;
}
html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top > span {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top [data-close] {
  position:absolute; top:calc(100dvh - 72px); left:50%; 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; margin:0; flex:none;
  border:1px solid var(--cream); border-radius:999px; background:var(--cream); color:var(--ink);
  font-size:19px; line-height:1; font-weight:400; box-shadow:none; transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top [data-close]::before {
  content:"Close"; font-size:14px; line-height:1.25; letter-spacing:0;
}
html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top [data-close]:focus-visible {
  outline:2px solid var(--cream); outline-offset:3px; box-shadow:0 0 0 5px var(--ground); border-radius:999px;
}
@media (hover:hover) and (pointer:fine) {
  html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top [data-close]:hover {
    border-color:var(--lux-pill-hover, #e8e1d6); background:var(--lux-pill-hover, #e8e1d6); color:var(--ink);
  }
}
@media (max-width:700px) {
  html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top [data-close] {
    top:calc(100dvh - max(18px, env(safe-area-inset-bottom)) - 46px); width:114.8px; height:46px; padding:0 20px;
  }
  html:not([data-publication]) #detailDialog:is(:has(.lux-detail), :has(.lv-catalog), :has(.selected-work-detail-hero), :has(.library-grid)) .detail-top [data-close]::before {
    font-size:13px;
  }
}