/* beta.34: shared chrome rules now live in assets/css/chrome.css (linked first).
   Only selectors this page overrides keep their local copies, so in-sheet cascade order is preserved. */
/* beta.20: author display must not override the hidden attribute */
/* ── beta.2 additions (documented in VERSION.txt; no rule above is altered) ── */
/* ════════════════════════════════════════════════════════════════
   LUXE x CLASSIC production header v1.0.0
   L1 Signature + L3 grafts (L2 ink stage removed in 1.0.0-beta.3). Namespace: lx-
   ════════════════════════════════════════════════════════════════ */
/* topbar (L1): contact / socials / translation */
/* translation dropdown (L1) */
/* header + nav (L1 metrics) */
/* links: mono caps + Classic underline + L3 tracking graft */
/* tracking-hover graft removed: the layout shift caused hover vibration */
/* mega: anchored to the sticky header, viewport-clamped */
/* hover bridges: keep the pointer connected across the gap between
   trigger and panel — kills the open/close flicker ("shivering") */
/* slim dropdown with family dots */
/* icon-circle search (expands into a pill) */
/* beta.2 (step 1): valid HTML — the pill is a div; the icon sits on a real
   <button>, the input lives in a <form role="search"> that GETs search.html */
/* theme toggle (L3 graft) */
/* RFQ (L1): gold with sheen sweep */
/* M3 segment divider: catalogue | company */
/* mobile burger + panel (approved pattern) */
@media (max-width: 1024px) {}
/* ===== page scaffolding ===== */
.page-head { padding: 26px 0 34px; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 40px; align-items: end; }
/* series cards (category page) */
.scard { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0; display: flex; flex-direction: column; overflow: hidden; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; text-decoration: none; }
.scard__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.scard:hover .scard__img { transform: scale(1.04); }
.scard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
@media (prefers-reduced-motion: reduce) {
.scard__img { transition: none; }
.scard:hover .scard__img { transform: none; }
}
/* product rows (subcategory page) */
/* spec card (product page) */
/* related row */
/* CTA band */
/* template note */
@media (max-width: 980px) {
.page-head, .pgrid { grid-template-columns: 1fr; }
}
/* sticky-footer technique (body flex column; main grows) */
/* ===== F1 footer — header-matched hovers (gradient underline, sheen,
   icon circles). WP destination: footer.php partial. ===== */
/* ===== internal page hero ===== */
/* ===== forms ===== */
/* ===== two-col content ===== */
/* ===== blog ===== */
/* ===== single post ===== */
/* ===== faq ===== */
/* ===== tds table ===== */
/* ===== sitemap page ===== */
/* ===== 404 / maintenance ===== */
/* generic content blocks */
/* photo band: category / series stand-in photography (beta.6) */
/* side gallery (beta.11): slider in the head rail - bigger image, arrows, thumbs, zoom */
.head-media { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 44px; align-items: center; padding-bottom: 34px; }
.sgal__stage { position: relative; }
.sgal__viewport { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; border: 1px solid var(--border); overflow: hidden; background: var(--surface); cursor: zoom-in; }
.sgal__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: scale(1.035); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), visibility 0s linear .5s; }
.sgal__slide.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sgal__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgal__slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #f7f4ef; background: linear-gradient(transparent, rgba(20,24,31,.78)); }
.sgal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(247,244,239,.4); background: rgba(20,24,31,.35); color: #f7f4ef; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background .2s, border-color .2s; }
.sgal__nav:hover, .sgal__nav:focus-visible { background: var(--ink); border-color: var(--ink); outline: none; }
.sgal__nav--prev { left: 12px; }
.sgal__nav--next { right: 12px; }
.sgal__nav svg { width: 16px; height: 16px; }
.sgal__zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #f7f4ef; background: rgba(20,24,31,.72); border: 0; padding: 5px 9px; border-radius: 3px; cursor: pointer; opacity: 0; transition: opacity .2s; }
.sgal__viewport:hover .sgal__zoom, .sgal__zoom:focus-visible { opacity: 1; }
.sgal__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.sgal__thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 2px; scrollbar-width: thin; min-width: 0; flex: 1 1 auto; }
.sgal__thumb { flex: 0 0 auto; width: 72px; border: 1px solid var(--border); border-radius: 3px; padding: 0; background: none; cursor: pointer; opacity: .68; transition: opacity .2s, border-color .2s; }
.sgal__thumb img { display: block; width: 100%; border-radius: 2px; }
.sgal__thumb:hover { opacity: 1; }
.sgal__thumb.is-on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.sgal__thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sgal__count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.sgal__note { font-family: var(--font-mono); font-size: 10px; color: var(--gold); margin-top: 10px; }
@media (max-width: 900px) {
.head-media { grid-template-columns: 1fr; gap: 14px; padding-bottom: 22px; }
.sgal__viewport { aspect-ratio: 16 / 9; max-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
.sgal__slide { transition: none; }
.sgal__zoom { transition: none; }
}
/* click-to-zoom + lightbox (beta.10) */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(20,24,31,.85); display: flex; align-items: center; justify-content: center; padding: 40px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1080px, 92vw); max-height: 86vh; border-radius: 4px; box-shadow: 0 40px 90px -20px rgba(0,0,0,.55); }
.lightbox__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(247,244,239,.3); background: rgba(20,24,31,.5); color: #f7f4ef; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s; }
.lightbox__close:hover, .lightbox__close:focus-visible { background: var(--gold); border-color: var(--gold); outline: none; }
.lightbox__close svg { width: 16px; height: 16px; }
/* muted-to-colour reveal on thumbnails (beta.15): rest desaturated, colour on hover/focus */
@media (hover: hover) {
.scard__img { filter: saturate(.4); transition: transform .5s cubic-bezier(.22,1,.36,1), filter .45s ease; }
.scard:hover .scard__img, .scard:focus-visible .scard__img { filter: saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.scard__img { transition: none; }
}
/* quote-list engine (beta.16) */
/* series filters (beta.16) */
.lx-filter {border:1px solid var(--border,#e2ded6);border-radius:4px;background:var(--surface,#fff);padding:14px 18px;margin:20px 0 22px;display:flex;flex-direction:column;gap:10px}
.lx-filter__row {display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.lx-filter__lab {font-family:var(--font-mono,ui-monospace,'Courier New',monospace);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim,#5c6570);min-width:64px}
.lx-filter__chips {display:flex;gap:6px;flex-wrap:wrap}
.lx-chip {font:inherit;font-size:12.5px;padding:5px 11px;border:1px solid var(--border,#e2ded6);border-radius:999px;background:none;cursor:pointer;color:var(--ink,#14181f);transition:border-color .15s ease,background .15s ease,color .15s ease}
.lx-chip:hover {border-color:var(--ink,#14181f)}
.lx-chip[aria-pressed="true"] {background:var(--ink,#14181f);color:#fff;border-color:var(--ink,#14181f)}
.lx-filter__meta {display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border,#e2ded6);padding-top:10px}
#lxFilterCount {font-family:var(--font-mono,ui-monospace,'Courier New',monospace);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim,#5c6570)}
.lx-filter__clear {background:none;border:0;cursor:pointer;font-family:var(--font-mono,ui-monospace,'Courier New',monospace);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#b0812b);text-decoration:underline;padding:2px}
.lx-filter__clear:hover {color:var(--ink,#14181f)}