body.reels-mode { overflow: hidden; background: #050609; }
body.reels-mode header { display: none; }

.reels-page {
  position: relative;
  width: min(100%, 620px);
  height: 100dvh;
  margin: 0 auto;
  background: #050609;
}

.reels-page__header {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 52px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent);
}

.reels-page__header > p { margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.reels-page__eyebrow { margin: 0 0 4px; color: #ff96c2; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reels-page__brand { pointer-events: auto; color: #fff; font-size: clamp(22px, 4vw, 28px); font-weight: 850; letter-spacing: -1px; }
.reels-page__brand span { color: var(--accent); }

.reels-feed {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  border: 0;
  border-radius: 0;
  background: #080a0e;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .35);
}

.reels-feed::-webkit-scrollbar { display: none; }

.reel {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 100%;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  isolation: isolate;
  background: #07090d;
}

.reel__backdrop {
  position: absolute;
  z-index: -2;
  inset: -28px;
  background-position: center;
  background-size: cover;
  filter: blur(28px) brightness(.36);
  transform: scale(1.08);
}

.reel__video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.reel--vast .fluid_video_wrapper { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.reel--vast .fluid_video_wrapper .fluid_video_wrapper { position: static !important; }
.reel--vast .fluid_video_wrapper video { width: 100% !important; height: 100% !important; object-fit: contain; }
.reel__gradient { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 25%, rgba(0, 0, 0, .02) 50%, rgba(0, 0, 0, .82) 100%); }

.reel__play-toggle,
.reel__sound-toggle,
.reel__actions a {
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 50%;
  background: rgba(12, 15, 21, .72);
  color: #fff;
  font-size: 17px;
  backdrop-filter: blur(8px);
}

.reel__play-toggle { position: absolute; z-index: 3; opacity: 0; pointer-events: none; transform: scale(.85); transition: opacity .16s ease, transform .16s ease; }
.reel.is-paused .reel__play-toggle { opacity: 1; pointer-events: auto; transform: scale(1); }
.reel__details { position: absolute; z-index: 2; right: 78px; bottom: 24px; left: 24px; color: #fff; }
.reel__details h2 { display: -webkit-box; margin: 4px 0 8px; overflow: hidden; font-size: clamp(18px, 4vw, 23px); line-height: 1.18; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.reel__model { margin: 0; color: #ffb0d1; font-size: 14px; font-weight: 800; }
.reel__meta { display: flex; align-items: center; gap: 7px; margin: 0; color: #d4d9e4; font-size: 13px; }
.reel__meta span { padding-left: 9px; border-left: 1px solid rgba(255,255,255,.35); }
.reel__actions { position: absolute; z-index: 3; right: 18px; bottom: 24px; display: grid; gap: 10px; }
.reel__sound-toggle:hover, .reel__sound-toggle:focus-visible, .reel__actions a:hover, .reel__actions a:focus-visible, .reel__play-toggle:focus-visible { border-color: var(--accent); background: var(--accent); outline: none; }
.reels-empty { display: grid; min-height: 100%; place-content: center; padding: 40px; color: var(--muted); text-align: center; }
.reels-empty i { color: #ff96c2; font-size: 34px; }
.reels-empty h2 { margin: 12px 0 4px; color: var(--text); }
.reels-empty p { margin: 0; }
.reels-loading { margin: 10px 0 0; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 719px) {
  .reels-page__header { padding: 16px 16px 48px; }
  .reels-page__header > p { display: none; }
  .reel__details { right: 70px; bottom: 20px; left: 18px; }
  .reel__actions { right: 14px; bottom: 20px; }
}