/* =========================================================
   THE BIG BOX — design system (production port)
   Direction: The Big-Box Gatefold (seed 825198ae)
   A shelf of oversized laserdisc/VHS big-box sleeves you open,
   not a streaming carousel you scroll.

   Loaded AFTER Bootstrap/global.css in layout.html.twig: this
   sheet only targets the movie/actor/recommendation surfaces
   plus the shared nav chrome. Ecommerce/account/checkout pages
   keep their existing Bootstrap look untouched.
   ========================================================= */

:root {
  --ink:        #0d0d10;
  --ink-2:      #17171c;
  --ink-3:      #202027;
  --line:       rgba(242, 237, 225, 0.12);
  --line-bright:rgba(242, 237, 225, 0.22);

  --paper:      #f2ede1;
  --paper-dim:  #e4dcc8;

  --cream:      #f2ede1;
  --cream-muted:#b8ae98;
  --cream-faint:#8a8271;

  --red:        #b3122a;
  --red-bright: #d81e3f;
  --red-deep:   #7c0c1d;

  --gold:       #c9a24b;
  --gold-bright:#e6c777;
  --gold-deep:  #8a6a2d;

  --yellow:       #e6b400;
  --yellow-bright:#ffd447;
  --yellow-deep:  #8f6a00;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-label:   'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Alegreya', Georgia, serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   SITE-WIDE NAV CHROME
   (targets the real nav.navbar.site-header markup in layout.html.twig —
   additive: Bootstrap classes stay, these rules just win the cascade)
   ========================================================= */

body.bigbox {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
}

/* "Dust in the Beam" — a slow drift of warm motes behind every page,
   like dust caught in a projector's throw. Sits on the negative-z-index
   layer so it paints behind ordinary (non-positioned) page content
   regardless of DOM order, without needing every section to opt in. */
#bb-dust {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* global.css paints an opaque grey on <main> and .main-content (the shelf
   grid's own wrapper) — that sits on top of the fixed dust layer over the
   entire page body, leaving the motes visible only where neither rule
   reaches (the footer). Strip it so the ink background + dust show through. */
body.bigbox main,
body.bigbox .main-content {
  background: transparent;
}

nav.site-header {
  position: relative;
  background: linear-gradient(to bottom, rgba(13,13,16,0.97), rgba(13,13,16,0.9) 70%, rgba(13,13,16,0.75)) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  padding-top: 14px;
  padding-bottom: 14px;
}

nav.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.02em;
  color: var(--cream);
  white-space: nowrap;
  text-decoration: none;
}
.wordmark .accent { color: var(--gold-bright); }
.wordmark:hover { color: var(--cream); }

footer .wordmark { color: var(--cream-muted); }
footer .wordmark .accent { color: var(--gold-deep); }

nav.site-header .navbar-toggler { border-color: var(--line-bright); }
nav.site-header .navbar-toggler-icon { filter: invert(0.9); }

ul.menu-links { gap: clamp(14px, 2.4vw, 30px); }
ul.menu-links > li > a {
  font-family: var(--font-label);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-muted) !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
ul.menu-links > li > a:hover,
ul.menu-links > li.active > a {
  color: var(--gold-bright) !important;
  border-color: var(--gold-deep);
}

/* named .bb-search-form (not .search-box) — the theme's own global.css already
   defines .search-box as an absolutely-positioned, zero-height toggle panel,
   which silently ate the new markup */
.bb-search-form {
  position: relative !important;
  display: block !important;
  height: auto !important;
  max-width: 200px;
  margin: 0 0 0 clamp(10px, 2vw, 24px);
}
.bb-search-form svg {
  display: block;
  position: absolute; left: 11px; top: 50%;
  width: 13px; height: 13px;
  margin: 0;
  transform: translateY(-50%);
  stroke: var(--cream-faint);
  fill: none;
  pointer-events: none;
}
.bb-search-form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  color: var(--cream);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: normal;
  border-radius: 2px;
  padding: 8px 12px 8px 32px;
  transition: border-color .25s var(--ease-out);
}
.bb-search-form input:focus { outline: none; border-color: var(--gold-bright); }
.bb-search-form input::placeholder { color: var(--cream-faint); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; }

/* marquee bulb-chase: cinema marquee lights, added only on the overview/recommendations page */
nav.site-header.has-marquee::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background-image: repeating-radial-gradient(circle at 0 50%, var(--gold-bright) 0 1.4px, transparent 1.6px 20px);
  background-size: 20px 3px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 3px rgba(230,199,119,0.85));
  animation: bigbox-marquee-chase 1.1s linear infinite;
  opacity: 0.9;
  pointer-events: none;
}
@keyframes bigbox-marquee-chase { to { background-position: 20px 0; } }
@media (prefers-reduced-motion: reduce) {
  nav.site-header.has-marquee::after { animation: none; }
}

.stat-readout {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  text-shadow: 0 0 14px rgba(230,199,119,0.4);
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}
.stat-readout .sep { color: var(--cream-faint); text-shadow: none; }

#back-to-top {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

/* =========================================================
   SHARED ATOMS
   ========================================================= */

.bigbox-shell { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

h1.bb-title, h2.bb-title, h3.bb-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

.chip, .tab, .btn-bb {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.chip {
  display: inline-block;
  font-size: 10.5px;
  padding: 5px 11px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--cream-muted);
}
.chip.is-owned { color: var(--gold-bright); border-color: var(--gold-deep); }
.chip.is-ordered { color: var(--ink); background: var(--yellow); border-color: var(--yellow-deep); }
.chip.is-notowned { color: var(--paper); background: var(--red-deep); border-color: var(--red-deep); }
.chip.is-accession {
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  border-color: var(--gold-deep);
  background: rgba(230,199,119,0.08);
}

/* the original Pimcore "Home > ..." trail — not useful on a single-user
   personal catalog with a shallow page tree, hidden rather than removed
   from the Twig logic (mainNavStartNode it computes is reused by the
   left-nav sidebar block) */
.breadcrumb-header { display: none; }

/* our own "back to the shelf" link on detail pages — named bb- to avoid
   colliding with Bootstrap's own .breadcrumb component classes */
.bb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(24px, 4vw, 40px);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-faint);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}
.bb-back-link .arrow { transition: transform .25s var(--ease-out); }
.bb-back-link:hover { color: var(--gold-bright); }
.bb-back-link:hover .arrow { transform: translateX(-4px); }

.btn-bb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  padding: 13px 26px;
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.btn-bb:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.btn-bb.is-solid { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-bb.is-solid:hover { background: var(--red-bright); border-color: var(--red-bright); color: var(--paper); }
.btn-bb .arrow { transition: transform .3s var(--ease-out); }
.btn-bb:hover .arrow { transform: translateX(4px); }

.bb-reveal { opacity: 0; transform: translateY(24px); }
.bb-reveal.is-visible { animation: bb-reveal-up .8s var(--ease-out) forwards; }
@keyframes bb-reveal-up { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bb-reveal { opacity: 1; transform: none; animation: none; } }

/* =========================================================
   GATEFOLD (hero / detail top section — reused for movie & actor detail, and the flagship pick)
   ========================================================= */

.bb-hero-wall {
  position: relative;
  padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 72px);
  background:
    linear-gradient(180deg, rgba(13,13,16,0) 0%, rgba(13,13,16,0.4) 78%, var(--ink) 100%);
  overflow: hidden;
}

.bb-spine-wall { position: absolute; inset: 0 0 32% 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bb-spine-wall::before {
  content: "";
  position: absolute;
  inset: -6% -8% auto -8%;
  height: 78%;
  background: repeating-linear-gradient(90deg,
    var(--gold-deep) 0 22px, var(--ink-2) 22px 27px,
    var(--red-deep) 27px 45px, var(--ink-2) 45px 50px,
    var(--paper-dim) 50px 64px, var(--ink-2) 64px 69px,
    var(--ink-3) 69px 96px, var(--ink-2) 96px 101px,
    var(--gold) 101px 118px, var(--ink-2) 118px 123px,
    var(--red) 123px 140px, var(--ink-2) 140px 145px
  );
  transform: perspective(2200px) rotateX(18deg) scaleY(1.08);
  transform-origin: top center;
  opacity: 0.48;
  animation: bb-spine-drift 16s linear infinite;
}
@keyframes bb-spine-drift {
  from { background-position: 0 0; }
  to { background-position: -580px 0; }
}
.bb-spine-wall::after { animation: bb-spine-glow 9s ease-in-out infinite alternate; }
@keyframes bb-spine-glow {
  from { opacity: 1; }
  to { opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-spine-wall::before, .bb-spine-wall::after { animation: none; }
}
.bb-spine-wall::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 85% at 50% 15%, rgba(13,13,16,0.98) 0%, rgba(13,13,16,0.8) 45%, transparent 78%),
    linear-gradient(180deg, rgba(13,13,16,0.1) 0%, var(--ink) 92%);
}

.gatefold {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  max-width: 1180px;
  margin: 0 auto;
  min-height: clamp(380px, 58vh, 600px);
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  overflow: hidden;
}

/* a slow diagonal sheen sweeping across every gatefold — the one ambient
   "cool, subtle" motion shared by the flagship hero and every detail page,
   so those pages read as alive rather than a static screenshot */
.gatefold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(230,199,119,0.05) 47%,
    rgba(230,199,119,0.15) 50%,
    rgba(230,199,119,0.05) 53%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 160% 0;
  animation: bb-gatefold-sheen 8s ease-in-out infinite;
}
@keyframes bb-gatefold-sheen {
  0% { background-position: 160% 0; }
  45%, 100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gatefold::after { animation: none; }
}

.gatefold-panel { position: relative; overflow: hidden; min-width: 0; }
.gatefold-panel.is-art { background: #050505; }
.gatefold-panel.is-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  filter: saturate(1.05) contrast(1.03);
}
.gatefold-panel.is-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,16,0.15), transparent 30%, transparent 80%, rgba(13,13,16,0.55));
}
.gatefold::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50.5%;
  width: 34px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(230,199,119,0.16) 45%, rgba(230,199,119,0.28) 50%, rgba(230,199,119,0.16) 55%, transparent);
  z-index: 5; pointer-events: none;
}
.gatefold-panel.is-text {
  padding: clamp(28px, 4vw, 56px) clamp(30px, 4.5vw, 60px);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse 520px 420px at 0% 0%, rgba(230,199,119,0.10), transparent 60%), var(--ink-2);
}
.gatefold-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.05;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 0 30px rgba(230,199,119,0.12);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.gatefold-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.gatefold-liner {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--cream-muted);
  max-width: 56ch;
}
.gatefold-liner::first-letter {
  font-family: var(--font-display);
  font-size: 2.4em;
  float: left;
  line-height: 0.8;
  padding: 0.05em 0.08em 0 0;
  color: var(--gold-bright);
}
.gatefold-facts {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-label); font-size: 11.5px; color: var(--cream-faint); letter-spacing: 0.04em;
}
.gatefold-facts b { color: var(--cream); font-weight: 400; }
.gatefold-actions { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .gatefold { grid-template-columns: 1fr; min-height: auto; }
  .gatefold-panel.is-art { aspect-ratio: 4 / 3; }
  .gatefold::before { display: none; }
}

/* =========================================================
   SHELVES (poster / actor rows)
   ========================================================= */

.bb-shelf-section { padding: clamp(40px, 6vw, 76px) 0 0; }
.bb-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.bb-shelf-head h2 { font-size: clamp(22px, 2.6vw, 32px); color: var(--cream); }
.bb-shelf-head .see-all {
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--cream-faint); white-space: nowrap; transition: color .25s var(--ease-out);
}
.bb-shelf-head .see-all:hover { color: var(--gold-bright); }

.bb-shelf-track {
  position: relative;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  padding: 8px 4px 30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.bb-shelf-track::-webkit-scrollbar { display: none; }
.bb-shelf-track.is-dragging { cursor: grabbing; user-select: none; }

.bb-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  padding: 26px 0 40px;
}
.bb-shelf-grid .sleeve { width: 100%; }

.sleeve {
  scroll-snap-align: start;
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 190px);
  display: block;
  transform: translateY(0);
  transition: transform .45s var(--ease-out);
}
.sleeve:hover, .sleeve:focus-visible { transform: translateY(-10px); }

.sleeve-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(0,0,0,0.2);
  transition: box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.sleeve:hover .sleeve-cover, .sleeve:focus-visible .sleeve-cover {
  border-color: transparent;
  box-shadow: 0 26px 48px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}
.sleeve-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out), filter .45s var(--ease-out);
  filter: saturate(0.86) brightness(0.92);
}
.sleeve:hover .sleeve-cover img, .sleeve:focus-visible .sleeve-cover img {
  transform: scale(1.045); filter: saturate(1.08) brightness(1);
}
.sleeve-spine {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 6px;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold) 40%, var(--gold-deep));
  opacity: 0.55;
  transition: opacity .35s var(--ease-out), width .35s var(--ease-out);
}
.sleeve:hover .sleeve-spine, .sleeve:focus-visible .sleeve-spine { opacity: 1; width: 8px; }
.sleeve-status {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-label); font-size: 9px; letter-spacing: 0.08em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(13,13,16,0.72); color: var(--gold-bright);
  border: 1px solid rgba(230,199,119,0.35);
  backdrop-filter: blur(3px);
}
.sleeve-status.is-ordered { color: var(--ink); border-color: var(--yellow-deep); background: var(--yellow-bright); }
.sleeve-status.is-notowned { color: var(--paper); border-color: rgba(216,30,63,0.6); background: rgba(124,12,29,0.75); }
.sleeve-caption { margin-top: 12px; }
.sleeve-title {
  font-family: var(--font-label); font-size: 13px; letter-spacing: 0.02em; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sleeve-sub { font-size: 11px; color: var(--cream-faint); margin-top: 2px; font-family: var(--font-label); letter-spacing: 0.04em; }

.sleeve-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag {
  font-family: var(--font-label); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--cream-faint);
}

/* actor / person card: a portrait sleeve, no spine or status — a different object, same shelf */
.actor-card { scroll-snap-align: start; flex: 0 0 auto; width: clamp(120px, 11vw, 148px); display: block; text-align: center; transition: transform .45s var(--ease-out); }
.actor-card:hover, .actor-card:focus-visible { transform: translateY(-8px); }
.actor-photo {
  position: relative; aspect-ratio: 2 / 3; border-radius: 2px; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.actor-card:hover .actor-photo, .actor-card:focus-visible .actor-photo {
  border-color: transparent; box-shadow: 0 22px 40px -18px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
}
.actor-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: saturate(0.86) brightness(0.94);
  transition: transform .6s var(--ease-out), filter .45s var(--ease-out);
}
.actor-card:hover .actor-photo img, .actor-card:focus-visible .actor-photo img { transform: scale(1.045); filter: saturate(1.05) brightness(1); }
.actor-name { margin-top: 12px; font-family: var(--font-label); font-size: 13px; color: var(--cream); }
.actor-role { font-size: 11px; color: var(--cream-faint); margin-top: 2px; font-family: var(--font-body); font-style: italic; }

/* =========================================================
   COLLECTION / SEARCH PAGE
   ========================================================= */

.bb-collection-head { padding: clamp(36px, 6vw, 60px) 0 0; }
.bb-collection-head h1 { font-size: clamp(30px, 4.2vw, 48px); }
.bb-collection-head p.dek { color: var(--cream-muted); font-family: var(--font-body); font-size: 16px; max-width: 60ch; margin-top: 12px; }

.filter-rail {
  position: relative;
  margin-top: clamp(24px, 4vw, 36px);
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--line);
}
.rail-row { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); flex-wrap: wrap; }

.search-slot { position: relative; flex: 1 1 220px; min-width: 180px; }
.search-slot input {
  width: 100%;
  background: var(--ink-2); border: 1px solid var(--line-bright); border-radius: 2px;
  padding: 12px 16px 12px 16px;
  color: var(--cream); font-family: var(--font-label); font-size: 13px; letter-spacing: 0.03em;
  transition: border-color .25s var(--ease-out);
}
.search-slot input:focus { border-color: var(--gold-bright); outline: none; }
.search-slot input::placeholder { color: var(--cream-faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }

.tab-group { display: flex; gap: 2px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 2px; padding: 3px; }
.tab {
  font-size: 11px; padding: 8px 14px; color: var(--cream-faint); border-radius: 1px; white-space: nowrap;
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.tab:hover { color: var(--cream); }
.tab.is-active { background: var(--gold-deep); color: var(--ink); }
.tab.is-active.tab-ordered { background: var(--yellow); color: var(--ink); }
.tab.is-active.tab-notowned { background: var(--red); color: var(--paper); }

.sort-select {
  background: var(--ink-2); border: 1px solid var(--line-bright); color: var(--cream);
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.05em;
  padding: 11px 30px 11px 14px; border-radius: 2px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cream-faint) 50%), linear-gradient(135deg, var(--cream-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.result-meta { margin-top: 16px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; color: var(--cream-faint); }
.result-meta b { color: var(--gold-bright); font-weight: 400; }

.bb-empty { padding: 90px 20px; text-align: center; color: var(--cream-faint); }
.bb-empty h3 { color: var(--cream); font-size: 22px; margin-bottom: 10px; font-family: var(--font-display); font-weight: 400; }

/* real Bootstrap pagination, restyled with our own glyphs — the theme's
   arrow.svg/doublearrow.svg icons live on an aria-hidden <span> that shared
   a selector with the active page's sr-only "(current)" span, so restyling
   that span un-hid screen-reader text and left a stray icon glyph floating
   over the active page number. Hide all of the theme's icon spans outright
   and draw our own arrows via ::before instead. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 36px 0 64px;
  list-style: none;
}
.pagination .page-item { display: flex; }
.pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 40px;
  height: 40px;
  padding: 0 14px !important;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  color: var(--cream-muted);
  font-family: var(--font-label);
  font-size: 13px;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.pagination .page-item.active .page-link { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--ink); }
.pagination .page-link:hover { border-color: var(--gold-bright); color: var(--gold-bright); transform: translateY(-2px); }

/* kill every theme icon span (they're all aria-hidden — the sr-only span
   that must stay hidden is not) and draw plain gold glyphs instead */
.pagination .page-link span[aria-hidden] { display: none !important; }
.pagination .page-link.first::before,
.pagination .page-link.prev::before,
.pagination .page-link.next::before,
.pagination .page-link.last::before {
  font-family: var(--font-label);
  font-size: 15px;
  line-height: 1;
  color: var(--gold-bright);
}
.pagination .page-link.first::before { content: '\00ab'; }
.pagination .page-link.prev::before  { content: '\2039'; }
.pagination .page-link.next::before  { content: '\203a'; }
.pagination .page-link.last::before  { content: '\00bb'; }

/* =========================================================
   ADD-MOVIE FORM
   ========================================================= */

.form-container {
  max-width: 560px;
  margin: clamp(40px, 6vw, 64px) auto;
  padding: clamp(28px, 4vw, 44px);
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  border-radius: 3px;
}
.form-container h1 {
  font-family: var(--font-display); font-weight: 400; font-size: 32px;
  text-align: center; color: var(--cream); margin: 0 0 28px;
}
.form-container .form-group { margin-bottom: 18px; }
.form-container label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream-faint);
}
.form-container input[type="text"],
.form-container select,
.form-container input[type="file"] {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 2px;
  padding: 11px 14px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
}
.form-container input[type="text"]:focus,
.form-container select:focus {
  outline: none; border-color: var(--gold-bright);
}
.form-container button {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  color: var(--paper);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease-out);
}
.form-container button:hover { background: var(--red-bright); }

/* =========================================================
   STEELBOOK GALLERY MODAL (movie detail page — only rendered
   when the object has Steelbook_Images to show)
   ========================================================= */

.bb-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), visibility 0s linear .25s;
}
.bb-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s var(--ease-out);
}
body.bb-modal-open { overflow: hidden; }

.bb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,9,11,0.88);
  backdrop-filter: blur(6px);
}

.bb-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  padding: 28px;
  background: var(--ink-2);
  border: 1px solid var(--line-bright);
  transform: translateY(16px) scale(0.98);
  transition: transform .3s var(--ease-out);
}
.bb-modal.is-open .bb-modal-dialog { transform: translateY(0) scale(1); }

.bb-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-bright);
  background: var(--ink);
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-close:hover { color: var(--gold-bright); border-color: var(--gold-deep); }

.bb-modal-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
}
.bb-modal-image {
  max-width: 100%;
  max-height: min(60vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--ink);
}
.bb-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-bright);
  background: rgba(13,13,16,0.75);
  color: var(--cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-nav:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.bb-modal-nav.prev { left: 8px; }
.bb-modal-nav.next { right: 8px; }

.bb-modal-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.bb-modal-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 88px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .2s var(--ease-out), border-color .2s var(--ease-out);
}
.bb-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-modal-thumb:hover { opacity: 0.85; }
.bb-modal-thumb.is-active { opacity: 1; border-color: var(--gold-bright); }

/* =============== responsive =============== */

@media (max-width: 560px) {
  nav.site-header .container { gap: 10px; }
  .rail-row { flex-direction: column; align-items: stretch; }
  .tab-group { width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tab-group::-webkit-scrollbar { display: none; }
  /* flex-basis becomes a HEIGHT basis once the row turns column — reset it, don't just set width */
  .sort-select, .search-slot { flex: 0 0 auto; width: 100%; }
  .bb-modal-dialog { padding: 18px; }
  .bb-modal-close { top: -10px; right: -10px; }
  .bb-modal-nav { width: 36px; height: 36px; font-size: 20px; }
}