/* Desktop catalog: fixed navigation and content that uses the available viewport. */
.catalog-side-rail { display: none; }
@media (min-width: 1024px) {
  .nox-catalog-page { --catalog-rail-width: 64px; --catalog-page-gutter: 24px; }
  .nox-catalog-page > .container {
    width: calc(100% - var(--catalog-rail-width)) !important;
    max-width: none !important;
    margin: 0 0 0 var(--catalog-rail-width) !important;
    border: 0; box-shadow: none;
  }
  .nox-catalog-page .header {
    left: var(--catalog-rail-width) !important; right: 0 !important;
    width: auto !important; max-width: none !important; transform: none !important;
    padding-inline: var(--catalog-page-gutter) !important; border-inline: 0;
  }
  /* The site name stays visible on desktop: the wordmark leads the header, then the page title.
     The side rail already carries the cat mark, so the header shows only the word. */
  .nox-catalog-page .header .logo {
    display: inline-flex !important; flex: none; align-items: center;
    position: static !important; margin: 0 !important; transform: none !important;
  }
  .nox-catalog-page .header .logo .nox-brand-icon { display: none !important; }
  .nox-catalog-page .header .logo .nox-wordmark-img { width: 68px; height: auto; }
  .nox-catalog-page .desktop-header-copy { display: flex; align-items: center; gap: 12px; }
  .nox-catalog-page .desktop-header-copy::before { content: ""; width: 1px; height: 16px; background: #ffffff2e; }
  .nox-catalog-page .desktop-header-copy strong { color: #f4f4f5; font: 600 18px/1.5 var(--c-sans); }
  .nox-catalog-page .desktop-header-copy span { display: none; }
  .nox-catalog-page .catalog-search { width: clamp(260px, 30vw, 440px); }
  .nox-catalog-page .category-nav,
  .nox-catalog-page .section-best,
  .nox-catalog-page .footer,
  .nox-catalog-page .hero-reel { width: calc(100% - 2 * var(--catalog-page-gutter)) !important; max-width: none !important; margin-inline: auto !important; }
  .catalog-side-rail {
    position: fixed; inset: 0 auto 0 0; z-index: 105; width: var(--catalog-rail-width);
    box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 6px 5px 16px; border-right: 1px solid #ffffff0d; background: #111112;
  }
  .catalog-side-rail > a, .catalog-side-rail > button {
    display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; width: 52px; min-height: 64px; padding: 8px 2px; box-sizing: border-box;
    border: 0; border-radius: 12px; background: transparent; color: #a1a1aa;
    text-decoration: none; font: 500 12px/1.3 var(--c-sans); cursor: pointer;
  }
  .catalog-side-rail > .catalog-rail-brand { min-height: 44px; margin-bottom: 8px; }
  .catalog-side-rail > a > i, .catalog-side-rail > button > i { font-size: 22px; }
  .catalog-side-rail > a:hover, .catalog-side-rail > button:hover,
  .catalog-side-rail > [aria-current="page"], .catalog-side-rail > [aria-expanded="true"] { color: #fff; background: #ffffff0d; }
  .catalog-side-rail > :focus-visible { outline: 2px solid #f472b6; outline-offset: -2px; }
  #catalogAccountButton { margin-top: auto; }
  .nox-catalog-page .home-sale-float { right: 24px; }
  /* Keep each banner readable while showing the next artwork in the wider rail. */
  .nox-catalog-page .hero-reel .hero2-stage { overflow: clip; }
  .nox-catalog-page .hero-reel .hero2-track { width: min(100%, 860px); margin: 0; }
  .nox-catalog-page .hero-reel .hero2-card.is-next { opacity: 1; transform: translate3d(calc(100% + 14px), 0, 0) !important; }
  .nox-catalog-page .hero-reel .hero2-card.is-after-next { visibility: visible; opacity: 1; transform: translate3d(calc(200% + 28px), 0, 0) !important; }
  .nox-catalog-page .catalog-section { --catalog-gap: 16px; }
  /* Section headings, rails and the character roster start on the same edge as the banner, category bar and footer. */
  .nox-catalog-page .section-best { padding-inline: 0; }
}
/* Tablets: sections start on the same edge as the category bar and footer, like desktop. */
@media (min-width: 768px) and (max-width: 1023px) {
  .nox-catalog-page .section-best { padding-inline: 0; }
}
/* Phones: home rails and headings bring their own 16px gutter, so the section adds none.
   The character roster has no gutter of its own and keeps the section padding. */
@media (max-width: 767px) {
  .nox-catalog-page:not(.character-page) .section-best { padding-inline: 0; }
}
@media (min-width: 1440px) { .nox-catalog-page .catalog-section { --catalog-columns: 6; } }
@media (min-width: 1800px) { .nox-catalog-page .catalog-section { --catalog-columns: 8; } }
@media (min-width: 2300px) { .nox-catalog-page .catalog-section { --catalog-columns: 10; } }