/* ============================================================
   Shoemaker — the Feniex catalogue: The Test Bench.

   One product at a time on a dark bench, lit by its own LEDs. The only light
   on this page is Feniex's own lit render and the pool that light throws on
   the bench in front of it; throwing a lens rocker relights both.
   Everything else is the site's Switch Panel, unchanged.
   ============================================================ */

/* The pool's colour eases between lenses instead of cutting, because a light
   bar changing mode does not teleport. Registering it is what lets a custom
   property transition at all. */
@property --pool {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(120 132 146);
}

html:not(.js) .needs-js { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.part-no {
  font-family: 'Archivo', system-ui, sans-serif;
  font-synthesis: none;
  font-weight: 650;
  font-stretch: 86%;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ---------- the bench ---------- */
.bench {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  min-height: clamp(640px, 96svh, 980px);
  padding: calc(var(--safe-t) + 5.2rem) var(--gut) clamp(1.6rem, 3.6vw, 2.8rem);
  background: radial-gradient(90% 70% at 50% 34%, #171C21 0%, var(--ink) 72%);
  transition: --pool 620ms var(--ease);
}

.bench-head { width: min(1220px, 100%); justify-self: center; }
.bench-head h1 {
  /* the documented display-panel step: a name on the bench, sized so the
     lens bank and the quote rail stay in a laptop's first viewport */
  font-size: clamp(1.95rem, 4.5vw, 3.35rem);
  max-width: 18ch;
}
/* The range's title is a sentence, not a product name: one line on a laptop,
   so the lens bank and the quote rail stay in the first viewport. */
.bench--range h1 { font-size: clamp(1.95rem, 4.5vw, 3.35rem); max-width: none; }
.bench-summary { margin-top: 0.9rem; max-width: 58ch; }

/* part number, line, type: one quiet line of fact under the name */
.bench-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.3rem;
  margin-top: 0.85rem;
  color: var(--paper-dim);
  font-size: 0.92rem;
}
/* no dividers: a divider that wraps to the start of a line is a stray mark */
.bench-meta { column-gap: 1.15rem; }
.bench-meta .part-no { color: var(--paper); }
.bench--range .bench-meta { margin-top: 1.1rem; }
.bench--range .bench-meta a { color: var(--paper); font-weight: 600; }

/* The stage's bottom edge IS the horizon: the product stands on it, its
   reflection falls below it, and the pool spreads across the bench from it.
   Anchoring all three to one edge is what makes the product sit rather than
   float, at every product's own proportions. */
.bench-stage {
  position: relative;
  display: grid;
  place-items: end center;
  width: min(1100px, 100%);
  margin: clamp(1.2rem, 3vw, 2rem) 0 0;
}
.bench-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 50%;
  width: 240vw;
  height: 80vh;
  translate: -50% 0;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  background:
    radial-gradient(min(620px, 48vw) 130px at 50% 0, color-mix(in srgb, var(--pool) 44%, transparent), transparent),
    linear-gradient(180deg, #1E242A 0%, #151A1F 26%, var(--ink) 100%);
}
/* the back wall catches a little of the same light */
.bench-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -45% -18% 0;
  pointer-events: none;
  background: radial-gradient(50% 58% at 50% 100%, color-mix(in srgb, var(--pool) 15%, transparent), transparent 76%);
}

.bench-img {
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(200px, 44svh, 520px);
  object-fit: contain;
  /* Feniex renders carry a soft shadow under the product. Lower the image by
     that much (measured per render at build time) so the product itself, not
     its shadow, stands on the horizon. */
  translate: 0 calc(var(--foot, 0) * 100%);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.bench-img.is-on { opacity: 1; view-transition-name: bench-product; }

/* The bench is glossy: the product's reflection, a real mirrored copy of the
   same render (same file, already cached), so it works in every browser. Its
   top edge meets the horizon where the product's foot does. */
.bench-refl {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(200px, 44svh, 520px);
  translate: -50% calc(var(--foot, 0) * -100%);
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 46%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 46%);
  pointer-events: none;
  transition: opacity 240ms var(--ease);
}

.bench-empty {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  max-width: 44ch;
  padding: clamp(2.4rem, 8svh, 5rem) 0 clamp(1.6rem, 5svh, 3rem);
  text-align: center;
  color: var(--paper-dim);
}
.bench-empty .legend { color: var(--paper-low); }
.bench-empty .btn { flex: 0 0 auto; margin-top: 0.4rem; }

/* ---------- the panel under the bench ---------- */
.bench-panel {
  width: min(980px, 100%);
  margin-top: clamp(1.2rem, 2.6vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.4rem;
}
.bench-panel .rail { grid-column: 1 / -1; margin-top: 0; }

.bench-controls { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.bench-label { color: var(--paper-dim); flex: none; }

.lens-bank {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 0.45rem;
  max-width: 600px;
}
.sw--lens { min-height: 52px; padding: 0.5rem 0.62rem; gap: 0.55rem; }
.sw--lens .sw-rocker { width: 26px; height: 36px; }

/* The meter window: Feniex's own numbers, recessed behind the panel face. */
.readout {
  display: flex;
  justify-self: start;
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.readout > div { padding: 0.6rem 0.95rem 0.66rem; }
.readout > div + div { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.readout dt { color: var(--paper-low); }
.readout dd {
  margin-top: 0.34rem;
  font-family: 'Archivo', system-ui, sans-serif;
  font-synthesis: none;
  font-weight: 700;
  font-stretch: 88%;
  font-size: 1.04rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
}

/* ---------- spec sheet ---------- */
.spec-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(270px, 1fr);
  align-items: start;
}
.spec-copy > p, .copy-block > p { margin-top: 1rem; }
.spec-copy h3 { margin: 2.1rem 0 0.85rem; }
.copy-block .copy-variant { margin-top: 1.6rem; }
.js .variant-bank ~ .copy-block .copy-variant { display: none; }
.variant-bank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 0.5rem;
  margin-top: 1.3rem;
}

.feat {
  list-style: none;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  max-width: 68ch;
}
.feat li {
  position: relative;
  padding: 0.66rem 0 0.66rem 1.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
/* an unlit indicator, not a bullet glyph */
.feat li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 1.08rem;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: #3A434C;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.spec--whole { grid-template-columns: 1fr; }
.spec--whole dd { text-align: left; }
.spec dd { overflow-wrap: anywhere; }

.spec-side {
  position: sticky;
  top: calc(var(--safe-t) + 92px);
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #20262C, #181D22);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 26px 64px -30px rgba(0, 0, 0, 0.85);
}
.spec-side h3 {
  font-size: 0.74rem;
  font-weight: 700;
  font-stretch: 78%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 1.5rem 0 0.7rem;
}
.spec-side h3:first-child { margin-top: 0; }
.part-no--lg { font-size: 1.24rem; color: #fff; overflow-wrap: anywhere; }
.spec-rail { margin-top: 1.4rem; }

.docs { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.docs a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 58px;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background var(--detent), border-color var(--detent);
}
.docs a:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.docs .icon { width: 22px; height: 22px; color: var(--amber-hot); }
.docs-size {
  display: block;
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--paper-low);
  font-variant-numeric: tabular-nums;
}

.views { margin-top: clamp(2.6rem, 5.4vw, 3.8rem); }
.shots {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(30%, 156px), 1fr));
}
.shot a {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* a cutout keeps the bench ground; Feniex's white tiles are shown as the
   printed sheets they are */
.shot--cut a { background: radial-gradient(85% 70% at 50% 62%, #232A31, var(--ink-2)); }
.shot--info a, .shot--photo a { background: #fff; }
.shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--slow);
}
.shot--cut img { padding: 0.7rem; }
.shot--photo img { object-fit: cover; }
.shot a:hover img { transform: scale(1.04); }
.credit { margin-top: clamp(2rem, 4vw, 2.8rem); max-width: 68ch; }

/* ---------- the shelf ---------- */
/* A control plate, not glass: there is no photograph behind it to see. */
.shelf-panel {
  margin-top: clamp(1.4rem, 3.6vw, 2.2rem);
  background: linear-gradient(180deg, #20262C, #181D22);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 26px 64px -30px rgba(0, 0, 0, 0.85);
}
.bank--shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.shelf-find {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.95rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.shelf-find .legend { color: var(--paper-dim); flex: none; }
.find-input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-top-color: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  color: var(--paper);
  caret-color: var(--amber-hot);
  -webkit-appearance: none;
  appearance: none;
}
.find-input::placeholder { color: var(--paper-low); opacity: 1; }
.find-input::-webkit-search-cancel-button { filter: invert(0.75); }

.shelf-count { margin-top: 1.1rem; min-height: 1.5em; }
.shelf-group { margin-top: clamp(1.8rem, 4.4vw, 2.8rem); }
.shelf-group h3 { padding-bottom: 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }

.parts {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  display: grid;
  gap: clamp(0.65rem, 1.6vw, 1.05rem);
  grid-template-columns: repeat(auto-fill, minmax(min(44%, 214px), 1fr));
}
.part a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.6rem 0.6rem 0.95rem;
  border-radius: var(--r-lg);
  text-decoration: none;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background var(--detent), border-color var(--detent), transform var(--detent);
}
.part a:hover { background: #1A1F25; border-color: rgba(255, 255, 255, 0.2); }
.part a:active { transform: translateY(1px) scale(0.995); }

/* a bench in miniature: wall, horizon at 72%, bench top, and the pool */
.part-plate {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(180deg, #12161A 0%, #161B20 72%, #1E242A 72%, #12161A 100%);
}
.part-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(58% 26% at 50% 72%, color-mix(in srgb, var(--pool) 34%, transparent), transparent);
  opacity: 0.55;
  transition: opacity var(--detent);
}
.part a:hover .part-plate::before, .part.is-here .part-plate::before { opacity: 1; }
.part-plate img {
  position: absolute;
  left: 8%;
  bottom: 28%;
  width: 84%;
  height: 58%;
  object-fit: contain;
  object-position: 50% 100%;
  transition: transform var(--slow);
}
.part a:hover .part-plate img { transform: translateY(-3px); }

.part-name {
  margin-top: 0.85rem;
  padding-inline: 0.35rem;
  font-family: 'Archivo', system-ui, sans-serif;
  font-synthesis: none;
  font-weight: 700;
  font-stretch: 100%;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--paper);
}
.part .part-no {
  margin-top: 0.3rem;
  padding-inline: 0.35rem;
  font-size: 0.86rem;
  color: var(--paper-dim);
  overflow-wrap: anywhere;
}
.part.is-here a { border-color: rgba(255, 255, 255, 0.3); }
.part-here { margin-top: 0.7rem; padding-inline: 0.35rem; color: var(--amber-hot); }

.shelf-empty {
  margin-top: 2rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--ink-2);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  color: var(--paper-dim);
}

/* ---------- shelf to bench ----------
   Where the browser supports it, the shelf photo you tapped flies up and
   becomes the product on the next page's bench. Elsewhere it is an ordinary
   page load; nothing depends on it. */
@view-transition { navigation: auto; }
::view-transition-group(bench-product) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 240ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .bench, .bench-img { transition: none; }
}

/* ---------- touch and narrow screens ---------- */
@media (hover: none) {
  .part a:active { background: #1A1F25; }
  .docs a:active { background: rgba(255, 255, 255, 0.1); }
}

@media (max-width: 900px) {
  .spec-grid { grid-template-columns: 1fr; }
  .spec-side { position: static; }
}

/* The call bar already carries "Quote this light" on a phone. */
@media (max-width: 860px) {
  .bench { min-height: 0; }
  .bench-panel .bench-quote { display: none; }
}

@media (max-width: 760px) {
  .bench-panel { grid-template-columns: 1fr; }
  .readout { width: 100%; }
  .readout > div { flex: 1; }
  .bank--shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bench { padding-top: calc(var(--safe-t) + 5rem); }
  /* a phone sizes the stage to the product; a thin bar needs no 34svh well */
  .bench-stage { min-height: 0; margin-top: 2.2rem; }
  .bench-controls { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .lens-bank { max-width: none; gap: 0.35rem; }
  /* five rockers across a phone: the paddle stands over its legend */
  .sw--lens { flex-direction: column; justify-content: center; gap: 0.4rem; min-height: 74px; padding: 0.55rem 0.15rem; }
  .sw--lens .sw-rocker { width: 24px; height: 32px; }
  .sw--lens .sw-text .legend { font-size: 0.72rem; letter-spacing: 0.04em; text-align: center; }
  .readout > div { padding: 0.55rem 0.7rem; }
  .readout dd { font-size: 0.92rem; }
  .shelf-find { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .variant-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- when Feniex published no cutout ----------
   The shelf card keeps its empty bench and says so, engraved. */
.part-none {
  position: absolute;
  inset: auto 0 40% 0;
  text-align: center;
  color: var(--paper-low);
}

/* With no lens bank, the meter window is the panel's whole top row. */
.bench-panel > .readout:first-child { justify-self: stretch; }
.bench-panel > .readout:first-child > div { flex: 1; }

/* ---------- search: a drawn clear control, not the browser's glyph ---------- */
.find-field { position: relative; flex: 1; min-width: 0; display: flex; }
.find-input { padding-right: 3.2rem; }
.find-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.find-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--paper-dim);
  cursor: pointer;
  transition: background var(--detent), color var(--detent);
}
.find-clear:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ---------- the shelf bank on a phone ----------
   Nine stacked rockers filled the whole first screen before a single product.
   On a phone the bank becomes one rail you swipe, and every rocker keeps its
   count. The fade at the right edge says there is more. */
@media (max-width: 560px) {
  .bank--shelf {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* snap to the panel's content inset, not its edge, so the first rocker
       lines up with the Find field below it */
    scroll-padding-inline: clamp(1rem, 2.6vw, 1.6rem);
    margin-inline: calc(-1 * clamp(1rem, 2.6vw, 1.6rem));
    padding: 0.15rem clamp(1rem, 2.6vw, 1.6rem) 0.4rem;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .bank--shelf::-webkit-scrollbar { display: none; }
  .bank--shelf .sw { flex: 0 0 auto; width: auto; scroll-snap-align: start; white-space: nowrap; }
  .bank--shelf .sw-sub { display: block; }
}

/* A panel holding only its rail has no row above for the rail's divider to divide. */
.bench-panel > .rail:first-child { border-top: 0; padding-top: 0; }