/* Fans: the product sheet's look, copied from the site's own sheet (#catalog -> #fansheet) by tools/fans/fansbuild.mjs */
#fansheet-title em,#fansheet-nav em{font-family:var(--serif-font);font-style:italic;font-weight:400;color:#f6e0c6cc;white-space:nowrap}
#fansheet{--ease: cubic-bezier(.65, 0, .25, 1);--line: #ffedd71c;--accent: #2fe0a8;position:fixed;inset:0;z-index:70;visibility:hidden;transition:visibility 0s linear .55s}
#fansheet.is-open{visibility:visible;transition-delay:0s}
#fansheet-scrim{position:absolute;inset:0;touch-action:none;background:#040c08db;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s var(--ease)}
#fansheet.is-open #fansheet-scrim{opacity:1}
@media(max-width:767.98px),(pointer:coarse){#fansheet-scrim{background:#040c08f0;backdrop-filter:none;-webkit-backdrop-filter:none}}
#fansheet-panel{position:absolute;top:0;right:0;bottom:0;width:min(1100px,94vw);overflow-y:auto;overscroll-behavior:contain;outline:none;background:linear-gradient(180deg,#11301f 0,#0b1d15 380px,#09170f);border-left:1px solid var(--line);box-shadow:-40px 0 80px -30px #000;transform:translate(104%);transition:transform .55s var(--ease);scrollbar-width:thin;scrollbar-color:#ffedd733 transparent}
#fansheet.is-open #fansheet-panel{transform:none}
#fansheet-panel>*{transition:opacity .26s ease,transform .26s ease}
#fansheet-panel.is-swapping>*{opacity:0;transform:translateY(10px)}
#fansheet-head{position:relative;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:2em;padding:2.2em 5.5em 1.6em 2.4em}
#fansheet-media{aspect-ratio:4 / 3;border-radius:14px;background:radial-gradient(70% 60% at 50% 45%,#2fe0a824,transparent 72%),#0c2118;border:1px solid var(--line)}
#fansheet-media img{width:100%;height:100%;object-fit:contain}
#fansheet-kicker{font-family:var(--mono-font);font-weight:400;color:var(--color-white-60)}
#fansheet-title{margin:.45em 0 .4em;font-size:var(--h3);line-height:1;text-transform:none;letter-spacing:-.015em}
#fansheet-desc{max-width:34em;font-size:var(--body3);line-height:1.5;color:var(--color-white-60)}
#fansheet-close{position:absolute;top:1.6em;right:1.6em;display:grid;place-items:center;width:3em;height:3em;padding:0;border:1px solid var(--line);border-radius:50%;background:#ffedd70a;cursor:pointer;transition:background-color .3s,transform .5s var(--ease)}
#fansheet-close:hover{background:#ffedd71f;transform:rotate(90deg)}
#fansheet-close svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#fansheet-tools{position:sticky;top:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:.8em 1.2em;padding:1em 2.4em;background:#0b1d15f2;border-block:1px solid var(--line)}
#fansheet-makers{display:flex;flex-wrap:wrap;gap:.5em}
#fansheet-makers[hidden]{display:none}
#fansheet-search{display:flex;align-items:center;gap:.6em;flex:1 1 15em;max-width:24em;padding:.55em 1em;border:1px solid var(--line);border-radius:2em;transition:border-color .3s}
#fansheet-search:focus-within{border-color:#2fe0a899}
#fansheet-search svg{width:1.1em;height:1.1em;flex:none;fill:none;stroke:var(--color-white-60);stroke-width:1.6;stroke-linecap:round}
#fansheet-search input{width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:calc(var(--sub2) * 1.05);outline:none}
#fansheet-search input::placeholder{color:var(--color-white-60)}
#fansheet-count{margin-left:auto;font-family:var(--mono-font);font-weight:400;color:var(--color-white-60);white-space:nowrap}
#fansheet-list{padding:.6em 2.4em 1em;min-height:40vh}
#fansheet-zoom.is-loading .zoom__media:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffedd712 50%,transparent 70%);transform:translate(-100%);animation:shimmer 1.3s ease-in-out infinite;pointer-events:none}
#fansheet-zoom{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:#040c08d9;opacity:0;transition:opacity .35s ease}
#fansheet-zoom[hidden]{display:none}
#fansheet-zoom.is-open{opacity:1}
#fansheet-zoom.is-open .zoom{transform:none}
#fanzoom-name{margin:0;font-size:calc(var(--h5) * 1.15);line-height:1.25;text-transform:none;letter-spacing:-.01em}
#fanzoom-desc{margin:.5em 0 1.1em;font-size:var(--body3);line-height:1.5;color:var(--color-white-60)}
#fanzoom-buy .buy{width:100%;padding:.85em 1em;font-size:calc(var(--sub2) * 1)}
#fansheet-list.is-entering tbody tr:nth-child(-n+12),#fansheet-list.is-entering .cg__head{animation:rowIn .4s var(--ease) both;animation-delay:calc(var(--r, 0) * 22ms + 60ms)}
#fansheet-foot{padding:2em 2.4em 2.6em}
#fansheet-foot p{max-width:60em;font-family:var(--mono-font);font-size:calc(var(--sub2) * .82);line-height:1.7;text-transform:uppercase;color:var(--color-white-60)}
#fansheet-nav{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-top:2em}
#fansheet-nav button{display:flex;flex-direction:column;gap:.4em;padding:1.2em 1.4em;border:1px solid var(--line);border-radius:14px;background:#ffedd705;text-align:left;font-size:calc(var(--h5) * 1.05);font-weight:600;cursor:pointer;transition:background-color .3s,border-color .3s}
#fansheet-nav button+button{text-align:right}
#fansheet-nav button:hover{background:#ffedd70f;border-color:#2fe0a85c}
#fansheet-nav small{font-family:var(--mono-font);font-size:.62em;font-weight:400;text-transform:uppercase;color:var(--color-white-60)}
#fansheet[data-kind=switches] #fansheet-media{display:grid;place-items:center;overflow:hidden}
#fansheet[data-kind=switches] #fansheet-media img{width:auto;height:auto;max-width:62%;max-height:72%;border-radius:4px;box-shadow:0 30px 40px -22px #000,0 2px 8px #0008}
#fansheet-list.is-entering .sp:nth-child(-n+12){animation:rowIn .4s var(--ease) both;animation-delay:calc(var(--r, 0) * 22ms + 60ms)}
@media(max-width:767.98px){#fansheet-panel{width:100vw;border-left:0}#fansheet-head{grid-template-columns:1fr;gap:1em;padding:4.4em 1.2em 1.2em}#fansheet-media{max-width:260px}#fansheet-close{top:1em;right:1em}#fansheet-tools{padding:.9em 1.2em}#fansheet-search{max-width:none}#fansheet-count{margin-left:0}#fansheet-list{padding:.4em 1.2em 1em}#fansheet-foot{padding:1.6em 1.2em 2.4em}#fansheet-nav{grid-template-columns:1fr}#fansheet-nav button+button{text-align:left}#fansheet[data-kind=cables] .ct td.ct__buy{grid-column:2 / -1;grid-row:2;align-self:end;padding-top:0}}
@media(prefers-reduced-motion:reduce){#fansheet-zoom.is-loading .zoom__media:after{animation:none;transform:none}#fansheet-list.is-entering tbody tr,#fansheet-list.is-entering .cg__head,#fansheet-list.is-entering .sp{animation:none}}

/* ───────────── Fans: the section (it uses the catalogue's own card and heading classes) ───────────── */
#fans { --ease: cubic-bezier(.65, 0, .25, 1); --line: #ffedd71f; --accent: #2fe0a8; padding: calc(var(--vh) * 10) 0 calc(var(--site-padding-y) * 2); }
#fans .products-lists { margin-bottom: calc(var(--vh) * 8); }
/* the maker cards: three of its fans, photo prints fanned out */
/* sized by width (the photos are wider than the switch plates), so the three stay inside the card in both directions */
.fan-card .cat-card__media.sw-fan img { width: 52%; height: auto; max-height: 86%; object-fit: cover; border-radius: 10px; background: #fff; }
.fan-card .cat-card__media.sw-fan img:nth-child(2) { width: 58%; }
@media (max-width: 767.98px) {
  .fan-card .cat-card__media.sw-fan { aspect-ratio: 16 / 10; }
  .fan-card .cat-card__media.sw-fan img { width: 54%; }
  .fan-card .cat-card__media.sw-fan img:nth-child(2) { width: 60%; }
}

/* ───────────── the fans sheet: the site's product sheet (copied above), with photo tiles ───────────── */
#fansheet-media { overflow: hidden; }
#fansheet-media img { object-fit: contain; }
.fan-grid { grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); }
.fan-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(15.5em, 1fr)); }
@media (max-width: 767.98px) {
  .fan-grid, .fan-grid.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
}
.fan-tile .sp__media {
  width: 100%; padding: 0; border: 0; margin-bottom: .45em; aspect-ratio: 16 / 11; border-radius: 9px; overflow: hidden;
  background: var(--bg, #0c2118); color: inherit; font: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.fan-tile.is-tall .sp__media { aspect-ratio: 4 / 5; }
.fan-tile.is-square .sp__media { aspect-ratio: 1; }
.fan-tile .sp__media img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; }
.fan-tile.is-room .sp__media img { object-fit: cover; object-position: 50% 12%; }
.fan-tile:hover .sp__media img { transform: scale(1.04); }
.fan-tile .sp__media:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fan-tile .buy { align-self: stretch; margin-top: auto; }
.fan-tile .sp__spec { margin-bottom: .55em; }
#fansheet-list.is-entering .sp:nth-child(-n+12) { animation: rowIn .4s var(--ease) both; animation-delay: calc(var(--r, 0) * 22ms + 60ms); }
#fansheet-zoom .zoom__media { background: var(--bg, #0c2118); }
#fansheet-zoom .zoom__media { max-height: 62vh; }
@media (hover: none) {
  .fan-tile:hover .sp__media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #fansheet-list.is-entering .sp { animation: none; }
  .fan-tile .sp__media img { transition: none; }
}