/* "More from FixtureLabs": two shelves, "On your desk" (hardware) and "On your screen" (software).
   Shared by keyboard.html and plugin.html. Artwork comes from fl-art.js (data-fl-art="keyboard", add data-soon for a
   blueprint). Mark the current product's card with .here and its status with .st.here ("You're here").
   Needs Inter / Inter Tight and the page tokens --ink, --muted, --line, --soft, --accent, --display, --text, --ease
   (fallbacks below). */
.shelves {
  --sh-ink: var(--ink, #1d1d1f); --sh-muted: var(--muted, #6e6e73); --sh-faint: #86868b; --sh-line: var(--line, #d2d2d7);
  --sh-soft: var(--soft, #f5f5f7); --sh-accent: #008575; --sh-green: #30a46c;
  --sh-display: var(--display, "Inter Tight", "Inter", system-ui, sans-serif); --sh-text: var(--text, "Inter", system-ui, sans-serif);
  --sh-ease: var(--ease, cubic-bezier(.2, .7, .1, 1));
  color: var(--sh-ink);
}
.shelves-head { text-align: center; max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px); }
.shelves-kick { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 99px; background: var(--sh-soft);
  font: 600 14px/1 var(--sh-text); color: var(--sh-ink); }
.shelves-kick img { height: 18px; }
.shelves-head h2 { margin-top: 20px; font: 600 clamp(38px, 4.8vw, 68px)/1.05 var(--sh-display); letter-spacing: -0.035em; text-wrap: balance; }
.shelves-head h2 span { color: var(--sh-faint); }

.shelf { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; padding: 36px 0; border-top: 1px solid var(--sh-line); }
.shelf:last-child { border-bottom: 1px solid var(--sh-line); }
.shelf-h h3 { font: 600 28px/1.1 var(--sh-display); letter-spacing: -0.025em; margin: 0; }
.shelf-h p { color: var(--sh-muted); margin: 8px 0 0; font-size: 16px; }
.shelf-items { display: grid; gap: 20px; }
.shelf-items.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shelf-items.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.si { display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: center; gap: 14px; min-height: 196px; padding: 18px 22px 18px 12px;
  background: var(--sh-soft); border-radius: 24px; color: inherit; text-decoration: none; transition: transform .4s var(--sh-ease), box-shadow .4s var(--sh-ease); }
a.si:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .35); }
.si-art { height: 150px; display: grid; place-items: center; }
.si-art svg { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.si-step { display: block; font: 600 13px/1 var(--sh-text); color: var(--sh-faint); }
.si h4 { margin: 7px 0 0; font: 600 20px/1.15 var(--sh-display); letter-spacing: -0.02em; }
.si p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--sh-muted); }
.si .st { margin-top: 12px; }
.si .si-more { display: inline-block; margin-top: 10px; font: 500 15px/1.2 var(--sh-text); color: var(--sh-accent); white-space: nowrap; }
.si .si-more::after { content: " \203A"; }
.si.here { background: #fff; box-shadow: inset 0 0 0 2px var(--sh-accent); }
.shelves .st { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--sh-text); color: var(--sh-muted); white-space: nowrap; }
.shelves .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-green); }
.shelves .st.soon::before { background: none; box-shadow: inset 0 0 0 1.5px #aeaeb2; }
.shelves .st.here { color: var(--sh-accent); }
.shelves .st.here::before { background: var(--sh-accent); box-shadow: 0 0 0 3px rgba(0, 186, 164, .25); }

@media (max-width: 1100px) {
  .shelf { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 820px) {
  .shelf-items.three, .shelf-items.two { grid-template-columns: 1fr; }
}