/* =============================================================================
   71 — LIBRARY GRID PAGE  (v15.553)
   Full-screen poster grid of the whole library, three per row, ranked by
   rating as ONE merged list — a 5-star album sits beside a 5-star film rather
   than four hundred movies below it. Opened from the `titles` stat.
   Sized off --shelfd-px like the rest of the app so it holds from 360px up.
   ========================================================================== */

.shelfd-lib-grid-overlay {
  position: fixed;
  inset: 0;
  /* Above the bottom nav (1300) and below the media profile overlay (3100).
     Sitting above 3100 — as this did at 4200 — hid the full-page media profile
     BEHIND this page, so tapping a poster on a friend's shelf looked like it
     did nothing. Every other destination is higher still (album 7320, game
     profile 7600, episode page 12000), so one value clears them all and the
     grid stays mounted underneath as the back target. */
  z-index: 2600;
  background: #0d0f12;
  transform: translate3d(100%, 0, 0);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.shelfd-lib-grid-overlay.is-open { transform: translate3d(0, 0, 0); }

.shelfd-lib-grid-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #fff;
  font-family: 'Sohne', 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ── header ───────────────────────────────────────────────────────────────── */
.shelfd-lib-grid-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  /* The notch/dynamic-island inset, same as every other full-screen surface. */
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(13, 15, 18, 0.96);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
/* Bare glyphs, no chrome. The 24px is the ICON; the button itself keeps a
   larger invisible hit area so a bare chevron is still comfortably tappable —
   an icon sized to the finger is not the same as a target sized to it. */
.shelfd-lib-grid-iconbtn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--shelfd-px, 1px));
  height: calc(40 * var(--shelfd-px, 1px));
  margin: calc(-8 * var(--shelfd-px, 1px)) calc(-8 * var(--shelfd-px, 1px));
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-lib-grid-iconbtn svg {
  width: 24px;
  height: 24px;
  display: block;
}
.shelfd-lib-grid-iconbtn:active { opacity: 0.55; }

.shelfd-lib-grid-titlebar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.shelfd-lib-grid-pagetitle {
  font-size: calc(15.5 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0.01em;
}
.shelfd-lib-grid-total {
  font-size: calc(11.5 * var(--shelfd-px, 1px));
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}
/* ── filter / sort modal (centred) ────────────────────────────────────────── */
.shelfd-lib-modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.shelfd-lib-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  transition: opacity 200ms ease;
}
.shelfd-lib-modal.is-open .shelfd-lib-modal-scrim { opacity: 1; }

.shelfd-lib-modal-panel {
  position: relative;
  width: 100%;
  max-width: calc(340 * var(--shelfd-px, 1px));
  /* Never taller than the viewport: the genre list can be long, and the body
     below scrolls rather than pushing the footer off-screen. */
  max-height: min(78vh, calc(560 * var(--shelfd-px, 1px)));
  display: flex;
  flex-direction: column;
  background: #14181d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(16 * var(--shelfd-px, 1px));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shelfd-lib-modal.is-open .shelfd-lib-modal-panel { opacity: 1; transform: scale(1); }

.shelfd-lib-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(14 * var(--shelfd-px, 1px)) calc(14 * var(--shelfd-px, 1px)) calc(10 * var(--shelfd-px, 1px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.shelfd-lib-modal-title {
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 600;
  color: #fff;
}
.shelfd-lib-modal-x {
  appearance: none; -webkit-appearance: none;
  width: calc(28 * var(--shelfd-px, 1px));
  height: calc(28 * var(--shelfd-px, 1px));
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.shelfd-lib-modal-x svg { width: 18px; height: 18px; }

.shelfd-lib-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(10 * var(--shelfd-px, 1px)) calc(14 * var(--shelfd-px, 1px));
}
.shelfd-lib-modal-label {
  font-size: calc(11 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin: calc(6 * var(--shelfd-px, 1px)) 0 calc(4 * var(--shelfd-px, 1px));
}
.shelfd-lib-modal-label:first-child { margin-top: 0; }

.shelfd-lib-modal-options { display: flex; flex-direction: column; }
.shelfd-lib-modal-option {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: calc(11 * var(--shelfd-px, 1px)) 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: calc(14 * var(--shelfd-px, 1px));
  font-weight: 500;
  text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.shelfd-lib-modal-option:last-child { border-bottom: 0; }
.shelfd-lib-modal-option.is-active { color: #fff; font-weight: 600; }
.shelfd-lib-modal-check {
  width: calc(17 * var(--shelfd-px, 1px));
  height: calc(17 * var(--shelfd-px, 1px));
  flex: 0 0 auto;
  color: #E6C766;
  opacity: 0;
}
.shelfd-lib-modal-option.is-active .shelfd-lib-modal-check { opacity: 1; }

.shelfd-lib-modal-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(9 * var(--shelfd-px, 1px)) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.shelfd-lib-modal-field:last-of-type { border-bottom: 0; }
.shelfd-lib-modal-fieldname {
  font-size: calc(14 * var(--shelfd-px, 1px));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.shelfd-lib-modal-select,
.shelfd-lib-modal-input {
  appearance: none; -webkit-appearance: none;
  flex: 0 1 auto;
  max-width: calc(180 * var(--shelfd-px, 1px));
  padding: calc(7 * var(--shelfd-px, 1px)) calc(10 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(8 * var(--shelfd-px, 1px));
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  font-size: calc(13.5 * var(--shelfd-px, 1px));
  text-align: right;
}
.shelfd-lib-modal-input { width: calc(96 * var(--shelfd-px, 1px)); }
.shelfd-lib-modal-select:focus,
.shelfd-lib-modal-input:focus { outline: none; border-color: rgba(230, 199, 102, 0.5); }
.shelfd-lib-modal-input::placeholder { color: rgba(255, 255, 255, 0.3); }

.shelfd-lib-modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(11 * var(--shelfd-px, 1px)) calc(14 * var(--shelfd-px, 1px)) calc(13 * var(--shelfd-px, 1px));
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.shelfd-lib-modal-clear,
.shelfd-lib-modal-done {
  appearance: none; -webkit-appearance: none;
  border: 0;
  border-radius: calc(9 * var(--shelfd-px, 1px));
  font-family: inherit;
  font-size: calc(13.5 * var(--shelfd-px, 1px));
  font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: calc(9 * var(--shelfd-px, 1px)) calc(14 * var(--shelfd-px, 1px));
}
.shelfd-lib-modal-clear { background: none; color: rgba(255, 255, 255, 0.5); padding-left: 0; }
.shelfd-lib-modal-done { background: #fff; color: #0d0f12; min-width: calc(84 * var(--shelfd-px, 1px)); }
.shelfd-lib-modal-clear:active, .shelfd-lib-modal-done:active { opacity: 0.7; }

/* ── category toggles ─────────────────────────────────────────────────────── */
.shelfd-lib-grid-filters {
  flex: 0 0 auto;
  display: flex;
  gap: calc(7 * var(--shelfd-px, 1px));
  padding: calc(9 * var(--shelfd-px, 1px)) 12px;
  overflow-x: auto;
  overflow-y: hidden;
  /* The row is meant to run off the edge on a narrow phone; the scrollbar
     would just eat vertical space in a 34px strip. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #0d0f12;
}
.shelfd-lib-grid-filters::-webkit-scrollbar { display: none; }

.shelfd-lib-grid-chip {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--shelfd-px, 1px));
  padding: calc(6 * var(--shelfd-px, 1px)) calc(11 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.shelfd-lib-grid-chip:active { transform: scale(0.97); }
.shelfd-lib-grid-chip.is-active {
  background: #fff;
  border-color: #fff;
  color: #0d0f12;
  font-weight: 600;
}
.shelfd-lib-grid-chip-count {
  font-size: calc(11 * var(--shelfd-px, 1px));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
}
.shelfd-lib-grid-chip.is-active .shelfd-lib-grid-chip-count { color: rgba(13, 15, 18, 0.55); }

/* Category selection REBUILDS the grid rather than hiding blocks of it: the
   view is one merged list ordered by rating, so "Movies" is a different list
   than a filtered view of the same DOM, not the same list with parts hidden. */

/* ── scroller ─────────────────────────────────────────────────────────────── */
.shelfd-lib-grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 12px calc(env(safe-area-inset-bottom, 0px) + 28px);
}

/* ── the grid ─────────────────────────────────────────────────────────────── */
.shelfd-lib-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--shelfd-px, 1px)) calc(9 * var(--shelfd-px, 1px));
}

.shelfd-lib-grid-tile {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Cheap virtualisation: off-screen tiles skip layout and paint entirely, so a
     library of several thousand posters scrolls like a short one. The intrinsic
     size keeps the scrollbar honest while they are skipped. */
  content-visibility: auto;
  contain-intrinsic-size: auto calc(190 * var(--shelfd-px, 1px));
}
.shelfd-lib-grid-tile:active { transform: scale(0.97); }

.shelfd-lib-grid-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: calc(9 * var(--shelfd-px, 1px));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  /* The hairline rides as an INSET shadow rather than a border or outline: it
     follows the corner radius exactly, costs no layout box, and so cannot
     nudge the grid columns the way a 0.9px border would. */
  box-shadow:
    inset 0 0 0 0.9px rgba(255, 255, 255, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.28);
}

/* Movies, TV and anime are true posters and take the app's canonical poster
   radius (3.9px, v12.797 — the same value used by the person filmography,
   More Like This and notification posters). Games and music keep the softer
   corner: box art and album covers are not poster-shaped and read better with
   it. */
/* Keyed off the TILE, not a section wrapper: the grid is one merged list now,
   so a movie and an album can sit side by side in the same rating band and each
   still has to carry its own shape. */
.shelfd-lib-grid-tile[data-lib-section="movies"] .shelfd-lib-grid-art,
.shelfd-lib-grid-tile[data-lib-section="shows"] .shelfd-lib-grid-art,
.shelfd-lib-grid-tile[data-lib-section="anime"] .shelfd-lib-grid-art {
  border-radius: 3.9px;
}

/* Album art is square, not poster-shaped. Forcing it into 2:3 either crops the
   sleeve or pillarboxes it — both wrong for a format whose artwork IS a square.
   Sitting inside a mixed row it aligns to the top, so the shorter tile hangs
   from the same line as the posters beside it rather than floating mid-row. */
.shelfd-lib-grid-tile[data-lib-section="music"] {
  align-self: start;
  contain-intrinsic-size: auto calc(150 * var(--shelfd-px, 1px));
}
.shelfd-lib-grid-tile[data-lib-section="music"] .shelfd-lib-grid-art {
  aspect-ratio: 1 / 1;
  border-radius: 3.6px;
}

/* Band marker: the score on the LEFT, then the rule running out to the right.
   It labels the band BELOW it, so scrolling past "★4" means everything from
   there down is a 4. Spanning every column is what makes it a band separator
   rather than a line under one tile. */
.shelfd-lib-grid-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--shelfd-px, 1px));
  margin: calc(6 * var(--shelfd-px, 1px)) 0 calc(2 * var(--shelfd-px, 1px));
}
.shelfd-lib-grid-divider:first-child { margin-top: 0; }

.shelfd-lib-grid-band {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--shelfd-px, 1px));
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
}
.shelfd-lib-grid-band-star {
  color: #E6C766;
  font-size: calc(11 * var(--shelfd-px, 1px));
  line-height: 1;
}
.shelfd-lib-grid-band-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.11),
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.012)
  );
}
.shelfd-lib-grid-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Posters legitimately go missing (a title added before art resolved, a dead
   CDN url). A flat placeholder reads as "no art", where a broken-image glyph
   reads as "the app is broken". */
.shelfd-lib-grid-art.is-empty {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}
.shelfd-lib-grid-art.is-empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.10), transparent 62%);
}

/* The user's own score, out of 5, with the app's canonical champagne-gold star
   (#E6C766, v10.523 / v14.623 — the same glyph colour every other rating
   surface uses). */
.shelfd-lib-grid-rating {
  position: absolute;
  right: calc(5 * var(--shelfd-px, 1px));
  bottom: calc(5 * var(--shelfd-px, 1px));
  display: inline-flex;
  align-items: center;
  gap: calc(2.5 * var(--shelfd-px, 1px));
  padding: 0 calc(5 * var(--shelfd-px, 1px));
  border-radius: calc(5 * var(--shelfd-px, 1px));
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: calc(10.5 * var(--shelfd-px, 1px));
  font-weight: 600;
  line-height: calc(16 * var(--shelfd-px, 1px));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.shelfd-lib-grid-star {
  color: #E6C766;
  font-size: calc(9.5 * var(--shelfd-px, 1px));
  line-height: 1;
}

.shelfd-lib-grid-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(11.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
}

/* ── long-press rating popup ──────────────────────────────────────────────── */
.shelfd-lib-ratepop { position: absolute; inset: 0; z-index: 6; }

/* The dim + blur applies to EVERYTHING behind this layer. The pressed poster
   and the rating card render above it, so they stay crisp without needing to
   be excluded by hand. */
.shelfd-lib-ratepop-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
  opacity: 0;
  transition: opacity 180ms ease;
}
.shelfd-lib-ratepop.is-open .shelfd-lib-ratepop-scrim { opacity: 1; }

/* A clone pinned over the original's exact rect — the real tile stays in the
   grid so nothing reflows behind the scrim. */
.shelfd-lib-ratepop-poster {
  position: fixed;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
}
.shelfd-lib-ratepop.is-open .shelfd-lib-ratepop-poster { opacity: 1; transform: scale(1.04); }
.shelfd-lib-ratepop-poster .shelfd-lib-grid-art { width: 100%; height: 100%; }

/* Mid-flight: the scrim and the rating card clear out so only the poster is
   moving, and the CSS transition is dropped — the Web Animations flight owns
   `transform` from here, and leaving a transition on it would fight the
   keyframes and stutter the travel. */
.shelfd-lib-ratepop.is-flying { pointer-events: none; }
.shelfd-lib-ratepop.is-flying .shelfd-lib-ratepop-scrim,
.shelfd-lib-ratepop.is-flying .shelfd-lib-ratepop-card {
  opacity: 0;
  transition: opacity 160ms ease;
}
.shelfd-lib-ratepop.is-flying .shelfd-lib-ratepop-poster {
  transition: none;
  will-change: transform;
  /* Above the sticky category headings it passes on the way. */
  z-index: 3;
}

.shelfd-lib-ratepop-card {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8vh);
  transform: translate(-50%, 10px);
  z-index: 2;
  width: min(86%, calc(320 * var(--shelfd-px, 1px)));
  padding: calc(14 * var(--shelfd-px, 1px)) calc(16 * var(--shelfd-px, 1px)) calc(12 * var(--shelfd-px, 1px));
  background: #14181d;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(16 * var(--shelfd-px, 1px));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  text-align: center;
  opacity: 0;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shelfd-lib-ratepop.is-open .shelfd-lib-ratepop-card { opacity: 1; transform: translate(-50%, 0); }

.shelfd-lib-ratepop-title {
  font-size: calc(13.5 * var(--shelfd-px, 1px));
  font-weight: 600;
  color: #fff;
  margin-bottom: calc(10 * var(--shelfd-px, 1px));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelfd-lib-ratepop-stars { display: flex; justify-content: center; }
/* The shared .stars row lays out inline; centre it and give the taps room. */
.shelfd-lib-ratepop-stars .stars { justify-content: center; flex-wrap: nowrap; }
.shelfd-lib-ratepop-hint {
  margin-top: calc(8 * var(--shelfd-px, 1px));
  font-size: calc(11 * var(--shelfd-px, 1px));
  color: rgba(255, 255, 255, 0.38);
}

/* A hold is a rating gesture here, so the OS text-selection and callout menus
   must not compete with it. */
.shelfd-lib-grid-tile {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .shelfd-lib-ratepop-poster,
  .shelfd-lib-ratepop-card { transition: opacity 120ms ease; }
  .shelfd-lib-ratepop.is-open .shelfd-lib-ratepop-poster { transform: none; }
}

/* ── empty state ──────────────────────────────────────────────────────────── */
.shelfd-lib-grid-empty {
  padding: 18vh 24px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.shelfd-lib-grid-empty p { margin: 0 0 6px; font-size: calc(14 * var(--shelfd-px, 1px)); }
.shelfd-lib-grid-empty-sub {
  font-size: calc(12 * var(--shelfd-px, 1px)) !important;
  color: rgba(255, 255, 255, 0.4);
}

/* Four across once there is room for it — on a tablet or landscape phone a
   three-wide grid leaves the posters comically large. */
@media (min-width: 620px) {
  .shelfd-lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .shelfd-lib-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .shelfd-lib-grid-scroll { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .shelfd-lib-grid-overlay { transition: none; }
  .shelfd-lib-grid-tile:active,
  .shelfd-lib-grid-back:active { transform: none; }
}