/* ═══════════════════════════════════════════════════════════════════════════
   LED CTRL — sitewide header + mega-menu
   Every rule is scoped under .lch-root so nothing here can reach the page.
   Tokens mirror the homepage V2 system (bg / ink / ink-muted / hairline /
   accent / radii / Montserrat scale) so the header reads as the same system.
   ═══════════════════════════════════════════════════════════════════════════ */

.lch-root {
    --bg:           #FFFFFF;
    --panel:        #FFFFFF;
    --ink:          #0E0F11;
    --ink-muted:    #565A61;   /* darkened: must hold 4.5:1 over glass, not just white */
    --ink-inverse:  #F4F3F1;
    --hairline:     #E3E1DE;
    /* The site's established accent: #fca311 appears 76 times across the
       product templates; #EE373F only twice (the draft homepage V2). */
    --accent:       #FCA311;
    --focus:        #0E0F11;   /* amber is ~1.9:1 on white — too weak to mark focus */

    --radius-panel: 32px;
    --radius-card:  20px;
    --radius-inner: 12px;
    --radius-pill:  999px;

    --gutter:       32px;
    --shell-max:    1440px;

    --lch-h:        72px;   /* bar height, rest state  */
    --lch-h-min:    60px;   /* bar height, scrolled    */
    --lch-top:      0px;    /* admin-bar offset        */
    /* Page content on this site reaches z-index 99999 (the #lc-popup product
       promo). The header must clear that, so the scale starts above it. */
    --lch-z:        200000;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── type scale ───────────────────────────────────────────────────────
       Montserrat is geometric and runs wide at small sizes, so the small
       styles get a touch more weight and the large ones get negative
       tracking. Every size in the header comes from this list. */
    --fs-nav:     14.5px;  --ls-nav:   -0.006em;
    --fs-pill:    13.5px;
    --fs-rail:    14px;
    --fs-chip:    11px;    --ls-chip:   0.02em;
    --fs-code:    13px;    --ls-code:   0.015em;
    --fs-name:    14px;
    --fs-desc:    12.5px;  --lh-desc:   1.45;
    --fs-link:    13px;    --ls-link:   0.02em;
    --fs-eyebrow: 11px;    --ls-eyebrow: 0.16em;
    --fs-m-item:  17.5px;

    /* ── glass material ───────────────────────────────────────────────────
       One material, three densities. The look does NOT come from opacity
       alone: it is the blur + saturation boost, the bright top edge, the
       specular sheen and the two-stage shadow together. Over a white page it
       still reads as a pane because of the edges; over imagery it becomes
       obviously glass. */
    /* Panels sit near-solid: they carry 12.5px tile descriptions over
       whatever the page happens to be, so their contrast cannot depend on it.
       The glass character comes from the edges, grain and sheen below — not
       from seeing through them. Was 0.80; revert there to restore. */
    --glass:        rgba(253, 253, 254, 0.97);   /* panels               */
    --glass-bar:    rgba(255, 255, 255, 0.76);   /* the bar at rest      */
    /* The rail and the footer strip are the SAME pane, not overlays on it.
       They carry only a whisper of extra white — enough to read as a slightly
       thicker part of the glass — so the diffused backdrop colour comes
       through them exactly as it does behind the tiles. */
    --glass-sub:    rgba(255, 255, 255, 0.10);   /* rail, panel footer   */
    --glass-raise:  rgba(255, 255, 255, 0.96);   /* lifted chips + tiles */

    /* Heavy diffusion: at this radius whatever is behind survives only as a
       broad colour field — measured detail energy is ~1.3/255, i.e. no shape is
       recoverable — while the raised saturation keeps that colour vivid. That
       combination is what reads as thick frosted glass rather than a white box. */
    /* A near-solid pane needs nothing like 120px of diffusion, and the blur
       was the expensive part of the composite on every dropdown open. */
    --glass-blur:   saturate(150%) blur(24px);
    --glass-blur-s: saturate(210%) blur(48px);

    /* Etched-glass grain. Without it a large translucent plane looks like flat
       paint; the fine noise gives the surface a physical texture. */
    --glass-grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    --glass-rim:    rgba(14, 15, 17, 0.10);
    --glass-edge:   rgba(255, 255, 255, 0.72);

    --glass-sheen: linear-gradient(180deg,
        rgba(255, 255, 255, 0.80) 0%,
        rgba(255, 255, 255, 0.30) 12%,
        rgba(255, 255, 255, 0.06) 34%,
        rgba(255, 255, 255, 0)    58%);

    --glass-shadow:
        0 34px 82px -30px rgba(14, 15, 17, 0.36),
        0 12px 30px -16px rgba(14, 15, 17, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 0 0 1px rgba(255, 255, 255, 0.45);

    --glass-lift:
        0 14px 30px -14px rgba(14, 15, 17, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55);

    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
}

.lch-root *,
.lch-root *::before,
.lch-root *::after { box-sizing: border-box; }

/* WordPress admin bar — it is fixed at top:0 even though Elementor renders its
   markup at the end of <body>, so the bar has to step down for logged-in users. */
body.admin-bar .lch-root { --lch-top: 32px; }
@media (max-width: 782px) { body.admin-bar .lch-root { --lch-top: 46px; } }

/* ── screen-reader + skip link ─────────────────────────────────────────────── */
.lch-sr,
.lch-skip {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lch-skip:focus {
    position: fixed; top: calc(var(--lch-top) + 8px); left: 8px;
    width: auto; height: auto; margin: 0; padding: 10px 16px;
    clip: auto; white-space: normal;
    background: var(--ink); color: #fff; border-radius: var(--radius-pill);
    z-index: calc(var(--lch-z) + 10); font-size: 14px; font-weight: 600;
}

/* ═══ BAR ═══════════════════════════════════════════════════════════════════ */

.lch-bar {
    position: fixed;
    top: var(--lch-top);
    left: 0; right: 0;
    z-index: var(--lch-z);
    background: var(--glass-bar);
    /* The bar stays true glass — thin, over hero imagery, and the signature of
       the design. It keeps the heavy diffusion the panels gave up. */
    -webkit-backdrop-filter: saturate(230%) blur(120px);
    backdrop-filter: saturate(230%) blur(120px);
    border-bottom: 1px solid transparent;
    transition: background 260ms var(--ease-out), border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

/* Reserves the bar's height in normal flow. Salient's #header-space never
   renders (Elementor discards the theme header), and body{overflow-x:hidden}
   rules out position:sticky, so the spacer is what keeps content clear. */
.lch-spacer {
    /* +1px for the bar's always-present 1px bottom border, so nothing shifts
       when the border goes from transparent to --hairline on scroll. */
    height: calc(var(--lch-h) + 1px);
    transition: height 200ms var(--ease-out);
}

.lch-root.is-scrolled .lch-bar {
    background: rgba(250, 250, 251, 0.72);
    border-bottom-color: var(--glass-rim);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                inset 0 -1px 0 rgba(255, 255, 255, 0.35),
                0 10px 28px -20px rgba(14, 15, 17, 0.32);
}
.lch-root.is-scrolled .lch-spacer { height: calc(var(--lch-h-min) + 1px); }

/* the bar carries the same frost + top light-catch as the panels */
.lch-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--glass-grain);
    background-size: 180px 180px;
    opacity: 0.04;
    mix-blend-mode: multiply;
}
.lch-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
}
.lch-bar-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--lch-h);
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    transition: height 200ms var(--ease-out);
}
.lch-root.is-scrolled .lch-bar-inner { height: var(--lch-h-min); }

/* With a panel open the bar takes the panel's density so the two read as one
   continuous pane of glass rather than two stacked surfaces. */
.lch-root.is-open .lch-bar {
    background: var(--glass);
    border-bottom-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ── logo ─────────────────────────────────────────────────────────────────── */
.lch-logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.lch-logo img {
    display: block; width: auto; height: 46px;
    transition: height 200ms var(--ease-out);
}
.lch-root.is-scrolled .lch-logo img { height: 38px; }

/* ── top-level items ──────────────────────────────────────────────────────── */
/* Back on the right, pushed off the logo. The relative offset drops it a few
   px without changing the bar's height or moving anything else. */
.lch-nav {
    position: relative;
    top: 8px;
    display: flex; align-items: center; gap: 4px;
    margin-left: auto;
}

.lch-top {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border: 0; background: transparent;
    font: 500 var(--fs-nav)/1 "Montserrat", sans-serif;
    letter-spacing: var(--ls-nav);
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.lch-top:hover {
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 0 0 1px rgba(14, 15, 17, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.lch-top[aria-expanded="true"] {
    color: var(--ink);
    background: var(--glass-raise);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 10px -6px rgba(14, 15, 17, 0.28);
}

.lch-caret {
    width: 7px; height: 7px; margin-top: -2px;
    opacity: 0.55;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms var(--ease-out);
}
.lch-top:hover .lch-caret { opacity: 0.8; }
.lch-top[aria-expanded="true"] .lch-caret { opacity: 1; transform: rotate(-135deg) translate(-2px, -2px); }

/* ── utilities ────────────────────────────────────────────────────────────── */
.lch-utils {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    margin-left: 18px; padding-left: 18px;
    border-left: 1px solid rgba(14, 15, 17, 0.09);
}
@media (max-width: 1000px) { .lch-utils { margin-left: auto; padding-left: 0; border-left: 0; } }

.lch-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 0; background: transparent; color: var(--ink);
    border-radius: var(--radius-pill); cursor: pointer;
    transition: background 160ms var(--ease-out);
}
.lch-icon:hover {
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 0 0 1px rgba(14, 15, 17, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.lch-icon svg {
    width: 19px; height: 19px; fill: none;
    stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

.lch-login {
    display: inline-flex; align-items: center;
    padding: 9px 19px; margin-left: 2px;
    font: 600 var(--fs-pill)/1 "Montserrat", sans-serif;
    letter-spacing: 0.01em;
    color: var(--ink); text-decoration: none;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(14, 15, 17, 0.12);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(14, 15, 17, 0.06);
    transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
    white-space: nowrap;
}
.lch-login:hover {
    background: var(--ink); border-color: var(--ink); color: #fff;
    box-shadow: 0 6px 18px -8px rgba(14, 15, 17, 0.55);
}

.lch-burger { display: none; flex-direction: column; gap: 4px; }
.lch-burger span {
    display: block; width: 19px; height: 1.8px;
    background: currentColor; border-radius: 2px;
    transition: transform 200ms var(--ease-out), opacity 160ms var(--ease-out);
}
.lch-root.is-mobile-open .lch-burger span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.lch-root.is-mobile-open .lch-burger span:nth-child(2) { opacity: 0; }
.lch-root.is-mobile-open .lch-burger span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* ═══ MEGA PANEL ════════════════════════════════════════════════════════════ */

/* Fixed, and a sibling of the bar rather than a child — see the note in the
   PHP: a backdrop-filtered ancestor would trap the panel's backdrop. Its top
   tracks the bar height so it still reads as dropping from it. */
.lch-panels {
    position: fixed;
    top: calc(var(--lch-top) + var(--lch-h) + 1px);
    left: 0; right: 0;
    z-index: calc(var(--lch-z) - 1);
    transition: top 200ms var(--ease-out);
}
.lch-root.is-scrolled .lch-panels { top: calc(var(--lch-top) + var(--lch-h-min) + 1px); }

.lch-panel {
    position: absolute;
    top: 0;
    left: var(--gutter); right: var(--gutter);
    margin: 0 auto;
    max-width: calc(var(--shell-max) - var(--gutter) * 2);
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-rim);
    border-top: 0;
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
    /* outer ambient + contact shadow, then the inner rims that imply the
       thickness of the pane: bright at the top and sides where light enters,
       darkening toward the bottom edge. */
    box-shadow:
        0 40px 90px -34px rgba(14, 15, 17, 0.40),
        0 14px 34px -18px rgba(14, 15, 17, 0.20),
        inset 0  1px 0 rgba(255, 255, 255, 0.95),
        inset  1px 0 0 rgba(255, 255, 255, 0.55),
        inset -1px 0 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -26px 40px -30px rgba(14, 15, 17, 0.26);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.995);
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}

/* Wet specular — a broad highlight rolling off the top edge plus a diagonal
   sweep, as light behaves on a curved wet surface. Sits BEHIND the content so
   it lights the pane without washing the tiles out. */
.lch-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(120% 70% at 18% -12%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(104deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.10) 26%, rgba(255, 255, 255, 0) 46%),
        var(--glass-sheen);
    pointer-events: none;
}

/* Frost. Deliberately faint — enough to feel etched, never enough to touch
   the legibility of anything sitting on top of it. */
.lch-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background-image: var(--glass-grain);
    background-size: 180px 180px;
    opacity: 0.045;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.lch-panel-inner,
.lch-panel-foot,
.lch-list { position: relative; z-index: 1; }
.lch-panel[hidden] { display: none; }
.lch-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }

.lch-panel-inner {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);   /* fits 'Beam & Architectural' on one line */
    gap: 0;
    max-height: calc(100vh - var(--lch-top) - var(--lch-h) - 96px);
    overflow: auto;
}

/* ── left rail ────────────────────────────────────────────────────────────── */
.lch-rail {
    display: flex; flex-direction: column; gap: 3px;
    position: relative;
    padding: 20px 14px;
    /* Flat. On a near-solid panel the old white-on-white gradients and inset
       highlights read as smudges rather than material, and stacked with the
       foot's they gave the panel four visible edges. One hairline is enough
       to say "these are different regions". */
    background: transparent;
    border-right: 1px solid rgba(14, 15, 17, 0.08);
}
.lch-rail-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 15px;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    font: 500 var(--fs-rail)/1.3 "Montserrat", sans-serif;
    letter-spacing: -0.004em;
    color: var(--ink);
    border-radius: var(--radius-inner);
    transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.lch-rail-btn:hover { background: rgba(14, 15, 17, 0.045); }
/* Active is stated by weight, ink and the accent bar — not by lifting the item
   off the surface. Nothing in a formal nav should look like a floating card. */
.lch-rail-btn.is-active {
    background: rgba(14, 15, 17, 0.055);
    font-weight: 600;
    color: var(--ink);
}
.lch-rail-btn.is-active .lch-rail-label { position: relative; }
.lch-rail-btn.is-active .lch-rail-label::before {
    content: ""; position: absolute; left: -15px; top: 50%;
    width: 3px; height: 15px; margin-top: -7.5px;
    background: var(--accent); border-radius: 2px;
}
.lch-rail-n {
    flex: 0 0 auto;
    font: 500 var(--fs-chip)/1 "Montserrat", sans-serif;
    letter-spacing: var(--ls-chip);
    color: var(--ink-muted);
    /* A plain tabular figure. The pill was a third border in a panel that
       already had too many. */
    font-variant-numeric: tabular-nums;
    padding: 0;
}

/* ── tile grid ────────────────────────────────────────────────────────────── */
/* --lch-per is how many tiles are visible at once. The tile width is derived
   from it, so every group renders at the SAME tile size — a 5-item group does
   not shrink to fit, it scrolls. */
.lch-grids {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 28px 28px;
    --lch-per: 4;
    --lch-gap: 12px;
    --lch-tile-max: 268px;
}
.lch-grid {
    display: grid;
    grid-auto-flow: column;
    /* Cap at the 4-up width so a tile is never LARGER than the reference size;
       narrower viewports just make it smaller, which is fine. */
    grid-auto-columns: min(
        var(--lch-tile-max),
        calc((100% - (var(--lch-per) - 1) * var(--lch-gap)) / var(--lch-per))
    );
    gap: var(--lch-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    overflow-anchor: none;   /* a horizontal track must never be re-anchored on relayout */
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;   /* room for the tile's focus ring */
}
.lch-grid::-webkit-scrollbar { display: none; }

/* Tiles scrolled past the edge fade out instead of being sliced off at the
   panel border. The fade only appears on a side that actually has more to see,
   so a group that fits shows no fade at all. */
.lch-grid {
    --m-l: 0px;
    --m-r: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--m-l), #000 calc(100% - var(--m-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--m-l), #000 calc(100% - var(--m-r)), transparent 100%);
}
.lch-grids.has-prev .lch-grid { --m-l: 56px; }
.lch-grids.has-next .lch-grid { --m-r: 56px; }

/* The scroller clips an outside ring, so keep the tile's focus ring inside. */
.lch-grid .lch-tile:focus-visible { outline-offset: -2px; }
.lch-grid[hidden] { display: none; }

/* ── track arrows ─────────────────────────────────────────────────────────── */
.lch-arrow {
    position: absolute;
    top: 104px;                     /* centred on the tile's image box */
    z-index: 2;
    width: 38px; height: 38px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: var(--glass-blur-s);
    backdrop-filter: var(--glass-blur-s);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 22px -10px rgba(14, 15, 17, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
    color: var(--ink); cursor: pointer;
    transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.lch-arrow[hidden] { display: none; }
.lch-arrow:hover {
    background: rgba(14, 15, 17, 0.92); color: #fff; transform: scale(1.06);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 26px -10px rgba(14, 15, 17, 0.55);
}
.lch-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lch-arrow--prev { left: 10px; }
.lch-arrow--next { right: 10px; }

.lch-tile {
    display: flex; flex-direction: column;
    padding: 10px 10px 16px;
    border-radius: var(--radius-card);
    background: transparent;
    text-decoration: none;
    transition: background 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.lch-tile:hover {
    background: var(--glass-raise);
    box-shadow: var(--glass-lift);
    transform: translateY(-3px);
}
.lch-tile:hover .lch-tile-media {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
                inset 0 -1px 0 rgba(255, 255, 255, 0.4),
                inset 0 -16px 24px -18px rgba(14, 15, 17, 0.24);
}

.lch-tile-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.30));
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-inner);
    box-shadow: inset 0  1px 0 rgba(255, 255, 255, 0.95),
                inset 0 -1px 0 rgba(255, 255, 255, 0.28),
                inset 0 -14px 22px -18px rgba(14, 15, 17, 0.22);
    overflow: hidden;
}
/* a wet gloss rolling across the image pane, with a light-catch at the very
   top-left corner where the glass would be thickest */
.lch-tile-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(90% 60% at 12% -8%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(152deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.10) 28%,
            rgba(255, 255, 255, 0) 54%);
}
/* aspect-ratio fallback for older engines */
@supports not (aspect-ratio: 4 / 3) {
    .lch-tile-media { height: 0; padding-bottom: 75%; }
}
.lch-tile-media picture,
.lch-tile-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
}
.lch-tile-media img {
    object-fit: contain;               /* NEVER cover — ratios run 0.55 to 2.45 */
    padding: 10px;
    transition: transform 180ms var(--ease-out);
}
.lch-tile:hover .lch-tile-media img { transform: scale(1.03); }

.lch-tile-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font: 600 20px/1 "Montserrat", sans-serif;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}

.lch-tile-body { display: block; padding: 13px 6px 0; }
.lch-tile-title {
    display: block;
    font: 500 var(--fs-name)/1.3 "Montserrat", sans-serif;
    letter-spacing: -0.004em;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lch-tile-title b {
    font-weight: 700;
    font-size: var(--fs-code);
    letter-spacing: var(--ls-code);
}
/* Reserving two lines keeps every tile in a row the same height, whatever the
   length of the descriptor — previously a two-line entry pushed its neighbours
   out of alignment. */
.lch-tile-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    min-height: calc(2 * var(--lh-desc) * var(--fs-desc));
    font: 400 var(--fs-desc)/var(--lh-desc) "Montserrat", sans-serif;
    color: var(--ink-muted);
}

/* ── panel footer strip ───────────────────────────────────────────────────── */
.lch-panel-foot {
    position: relative;
    display: flex;
    justify-content: flex-end;   /* the action sits where the eye finishes */
    border-top: 1px solid rgba(14, 15, 17, 0.08);
    padding: 13px 28px;
    background: transparent;
}
.lch-allink {
    display: inline-flex; align-items: center; gap: 7px;
    font: 600 var(--fs-link)/1 "Montserrat", sans-serif;
    letter-spacing: var(--ls-link);
    color: var(--ink);
    text-decoration: none;
    transition: color 160ms var(--ease-out), gap 160ms var(--ease-out);
}
.lch-allink:hover { gap: 11px; }
.lch-allink:hover { color: var(--accent); }

/* ── simple list panel (Resources) ────────────────────────────────────────── */
/* Anchored under its own trigger — JS sets --lch-anchor to the button's left
   edge on open (and on resize), so the dropdown never drifts to the bar edge. */
.lch-panel--list {
    left: var(--lch-anchor, auto);
    right: auto;
    margin: 0;
    width: 232px;
    max-width: 232px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.lch-list { display: flex; flex-direction: column; padding: 12px; gap: 2px; }
.lch-list-item {
    padding: 12px 15px;
    font: 500 var(--fs-rail)/1.2 "Montserrat", sans-serif;
    letter-spacing: -0.004em;
    color: var(--ink); text-decoration: none;
    border-radius: var(--radius-inner);
    transition: background 160ms var(--ease-out);
}
.lch-list-item:hover {
    background: var(--glass-raise);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 2px 8px -5px rgba(14, 15, 17, 0.25);
}

/* ═══ SEARCH OVERLAY ════════════════════════════════════════════════════════ */
.lch-search {
    position: fixed;
    top: calc(var(--lch-top) + var(--lch-h) + 1px);
    left: 0; right: 0;
    z-index: calc(var(--lch-z) - 1);
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-rim);
    box-shadow: 0 28px 60px -30px rgba(14, 15, 17, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.92),
                inset 0 -18px 30px -26px rgba(14, 15, 17, 0.22);
}
.lch-search[hidden] { display: none; }
.lch-root.is-scrolled .lch-search { top: calc(var(--lch-top) + var(--lch-h-min) + 1px); }
.lch-search-form {
    display: flex; align-items: center; gap: 10px;
    max-width: var(--shell-max); margin: 0 auto;
    padding: 18px var(--gutter);
}
.lch-search-input {
    flex: 1 1 auto; min-width: 0;
    padding: 14px 20px;
    font: 400 15.5px/1.2 "Montserrat", sans-serif;
    letter-spacing: -0.004em;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(14, 15, 17, 0.1);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 2px rgba(14, 15, 17, 0.06);
}
.lch-search-input::placeholder { color: var(--ink-muted); }
.lch-search-go {
    padding: 14px 24px; border: 0; cursor: pointer;
    font: 600 var(--fs-pill)/1 "Montserrat", sans-serif;
    letter-spacing: 0.01em;
    color: #fff; background: var(--ink);
    border-radius: var(--radius-pill);
}
.lch-search-close {
    width: 40px; height: 40px; flex: 0 0 auto;
    border: 0; background: transparent; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--ink-muted);
    border-radius: var(--radius-pill);
}
.lch-search-close:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); }

/* ═══ FOCUS ═════════════════════════════════════════════════════════════════ */
.lch-root :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--radius-inner);
}
.lch-tile:focus-visible { outline-offset: 2px; }

/* ═══ MOBILE ════════════════════════════════════════════════════════════════ */

.lch-mobile {
    position: fixed;
    top: calc(var(--lch-top) + var(--lch-h) + 1px);
    left: 0; right: 0; bottom: 0;
    z-index: calc(var(--lch-z) - 10);
    background: rgba(255, 255, 255, 0.80);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    opacity: 0;
    transition: opacity 180ms var(--ease-out);
}
.lch-mobile[hidden] { display: none; }
.lch-mobile.is-open { opacity: 1; }
.lch-root.is-scrolled .lch-mobile { top: calc(var(--lch-top) + var(--lch-h-min) + 1px); }
.lch-mobile-scroll {
    height: 100%; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 20px 64px;
}
body.lch-locked { overflow: hidden !important; }

.lch-m-section { padding: 12px 0 20px; border-bottom: 1px solid rgba(14, 15, 17, 0.08); }
.lch-m-section:last-child { border-bottom: 0; }
.lch-m-head {
    margin: 8px 2px 12px;
    font: 600 var(--fs-eyebrow)/1 "Montserrat", sans-serif;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--ink-muted);
}
.lch-m-acc {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 16px 4px;
    border: 0; border-top: 1px solid rgba(14, 15, 17, 0.08);
    background: transparent; cursor: pointer; text-align: left;
    font: 500 var(--fs-m-item)/1.25 "Montserrat", sans-serif;
    letter-spacing: -0.008em; color: var(--ink);
}
.lch-m-acc::after {
    content: ""; flex: 0 0 auto;
    width: 9px; height: 9px; margin-right: 6px;
    border-right: 1.8px solid var(--ink-muted);
    border-bottom: 1.8px solid var(--ink-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 200ms var(--ease-out);
}
.lch-m-acc[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.lch-m-n {
    margin-left: auto;
    font: 500 11px/1 "Montserrat", sans-serif; color: var(--ink-muted);
    padding: 4px 7px; border: 1px solid var(--hairline); border-radius: var(--radius-pill);
}
.lch-m-body {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; padding: 6px 0 16px;
}
.lch-m-body[hidden] { display: none; }
.lch-m-all,
.lch-m-link {
    display: block; padding: 15px 4px;
    border-top: 1px solid rgba(14, 15, 17, 0.08);
    font: 500 var(--fs-m-item)/1.25 "Montserrat", sans-serif;
    letter-spacing: -0.008em;
    color: var(--ink); text-decoration: none;
}
.lch-m-all {
    font-weight: 600; font-size: var(--fs-link); letter-spacing: var(--ls-link);
    border-top: 0; padding-top: 14px;
}
.lch-m-link--login { color: var(--accent); font-weight: 600; }

@media (max-width: 1000px) {
    .lch-root { --gutter: 20px; --lch-h: 64px; --lch-h-min: 56px; }
    .lch-nav,
    .lch-login { display: none; }
    .lch-burger { display: inline-flex; }
    .lch-panels { display: none; }
}

/* Tablet: the two-up accordion grid makes tiles far too tall at 768px. */
@media (min-width: 620px) and (max-width: 1000px) {
    .lch-m-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lch-mobile-scroll { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 560px) {
    .lch-root { --gutter: 16px; }
    .lch-logo img { height: 36px; }
    .lch-root.is-scrolled .lch-logo img { height: 30px; }
    .lch-search-go { display: none; }
    .lch-m-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lch-tile-title { font-size: 13px; }
    .lch-tile-desc { font-size: 12px; }
}

/* ── desktop breakpoints: keep the panel legible as it narrows ─────────────── */
@media (max-width: 1180px) and (min-width: 1001px) {
    .lch-panel-inner { grid-template-columns: 214px minmax(0, 1fr); }
    .lch-grids { --lch-per: 3; }      /* same tile size, three in view */
    .lch-top { padding: 9px 11px; font-size: 14px; }
    .lch-nav { gap: 0; }
}
@media (min-width: 1600px) {
    .lch-root { --gutter: 48px; }
}

/* ═══ WHEN GLASS IS NOT AVAILABLE OR NOT WANTED ═════════════════════════════
   Two cases: engines with no backdrop-filter (the translucency would just look
   like washed-out white over content), and viewers who have asked the OS to cut
   transparency. Both get the same solid, fully legible surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lch-bar,
    .lch-root.is-scrolled .lch-bar,
    .lch-root.is-open .lch-bar { background: var(--bg); }
    .lch-panel,
    .lch-search   { background: var(--panel); }
    .lch-mobile   { background: var(--bg); }
    .lch-rail     { background: var(--ink-inverse); }
    .lch-arrow    { background: var(--panel); }
    .lch-tile-media { background: var(--ink-inverse); }
    .lch-panel::before,
    .lch-panel::after,
    .lch-bar::before,
    .lch-bar::after,
    .lch-tile-media::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .lch-bar,
    .lch-root.is-scrolled .lch-bar,
    .lch-root.is-open .lch-bar { background: var(--bg); }
    .lch-panel,
    .lch-search   { background: var(--panel); }
    .lch-mobile   { background: var(--bg); }
    .lch-rail     { background: var(--ink-inverse); }
    .lch-arrow    { background: var(--panel); }
    .lch-tile-media { background: var(--ink-inverse); }
    .lch-panel::before,
    .lch-panel::after,
    .lch-bar::before,
    .lch-bar::after,
    .lch-tile-media::after { display: none; }
    .lch-bar, .lch-panel, .lch-search, .lch-mobile, .lch-arrow {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ═══ REDUCED MOTION ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .lch-grid { scroll-behavior: auto; }
    .lch-root *,
    .lch-root *::before,
    .lch-root *::after {
        transition: none !important;
        animation: none !important;
    }
    .lch-panel { transform: none; }
    .lch-tile:hover { transform: none; }
    .lch-tile:hover .lch-tile-media img { transform: none; }
    .lch-arrow:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY SUB-NAVS — collision fix
   68 product templates carry `#top-bar { position: sticky; top: 0 }` and the
   index pages carry `#<prefix>-subnav` the same way. The header is fixed at
   top:0 with a far higher z-index, so without this they stick underneath it
   and vanish on scroll. Offsetting by the bar's own height parks them
   directly below it, and the scrolled height keeps that true after the bar
   shrinks. Not scoped to .lch-root: these elements are page content, not
   header markup — but this sheet only loads when the header renders.
   ═══════════════════════════════════════════════════════════════════════════ */

#top-bar,
[id$="-subnav"] {
    top: calc(var(--lch-h, 72px) + var(--lch-top, 0px)) !important;
}

body.lch-scrolled #top-bar,
body.lch-scrolled [id$="-subnav"] {
    top: calc(var(--lch-h-min, 60px) + var(--lch-top, 0px)) !important;
}

/* The tokens live on .lch-root, so mirror the two the rules above need onto
   the document element where page content can see them. */
:root {
    --lch-h: 72px;
    --lch-h-min: 60px;
}
body.admin-bar { --lch-top: 32px; }
@media (max-width: 782px) { body.admin-bar { --lch-top: 46px; } }