/* =============================================================================
   AltSounds — Customizer CSS
   v12 — May 2026

   Changes from v11:
     - SAFARI HALF-BLACK FIX (real this time): completely removed the
       `#asplayer::before` blurred-glow pseudo. The previous attempt left
       BOTH the old broken rule AND a new `.entry-video::before` rule in
       the same inline style block, and the old rule kept winning. v12
       deletes the old rule entirely. The atmospheric blur effect is gone
       — the video iframe alone fills the upper area, page bg shows
       through the rest. Cleaner; no Safari paint truncation.
     - The poster-image preview during YouTube load still works (the
       inline `background:url(poster)` on #asplayer itself remains; only
       the EXTRA blurred ::before pseudo is removed).

   Changes from v10:
     - HERO: blur reduced from 38px → 10px, brightness raised, stronger
       dark overlay gradient so hero artwork reads clearer but titles still
       have contrast. Done via override of plugin's taxonomy.php CSS.
     - FOOTER KEYBOARD LEGEND: hidden on non-single-gallery pages.
     - MOBILE MENU BUTTON: theme's #mobileMenuButton fully killed.
   ============================================================================= */

:root {
  --altsounds-horizontal-gutter: 3vw;
  --alts-accent: #bbff00;
  --alts-accent-soft: rgba(191, 255, 0, 0.15);

  --alts-hdr-pad-y: 32px;
  --alts-hdr-pad-x: 50px;
  --alts-hdr-logo-h: 72px;
  --alts-hdr-icon-size: 56px;
  --alts-hdr-icon-fontsize: 28px;
  --alts-hdr-height: calc(var(--alts-hdr-pad-y) * 2 + var(--alts-hdr-logo-h));
}

/* =========================================================
   SITE-WIDE HIDES
   ========================================================= */

.shopify-buy-frame,
.shopify-buy-frame--toggle,
.shopify-buy-frame--product,
.shopify-buy-frame--cart,
#product-component-1711514461374,
.shopify-buy-cart-wrapper {
  display: none !important;
  visibility: hidden !important;
}

#mobileMenuButton,
button#mobileMenuButton,
body > #mobileMenuButton {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

.grecaptcha-badge { display: none !important; opacity: 0; }
#superbgimage img { display: none !important; }
div.clearfix.entry-meta.entry-meta-head { display: none !important; }
.max-mobile-menu { display: none !important; }

.ytp-expand-pause-overlay .ytp-pause-overlay,
.ytp-pause-overlay-container {
  display: none !important;
  height: 1px;
}
.ytp-pause-overlay  { bottom: -200px !important; }
.ytp-chrome-top     { opacity: 0; }
.ytp-show-cards-title { display: none !important; }
a.ytp-watermark.yt-uix-sessionlink { opacity: 0 !important; }

/* =========================================================
   KILL BLACK BAR ON CHANNEL PAGES
   ========================================================= */
body.tax-gallery-categories #main {
  padding-top: 0 !important;
}

/* =========================================================
   HERO BACKDROP
   ========================================================= */
body.tax-gallery-categories .alts-channel-hero::before {
  filter: blur(10px) brightness(0.55) saturate(1.15) !important;
  transform: scale(1.05) !important;
}
body.tax-gallery-categories .alts-channel-hero::after {
  background:
    radial-gradient(ellipse at center 42%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.25) 45%, rgba(4,4,4,0.92) 100%) !important;
}

/* =========================================================
   UNIFIED HEADER & ICON NAV (non-single-gallery, desktop)
   ========================================================= */

html body:not(.single-gallery) .main-header,
html body:not(.single-gallery) header.main-header {
  all: unset;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  min-height: 160px !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background 0.3s ease, padding 0.25s ease, min-height 0.25s ease;
  font-family: inherit;
}

html body:not(.single-gallery) .main-header.alts-scrolled {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 100%) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  min-height: 80px !important;
}

html body:not(.single-gallery) .main-header #branding,
html body:not(.single-gallery) .main-header .navbar {
  all: unset;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  top: 50px !important;
  left: 50px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 1001 !important;
  transition: transform 0.25s ease !important;
  transform-origin: left center !important;
  cursor: pointer !important;
}

html body:not(.single-gallery) .main-header #branding:hover {
  transform: scale(1.08) !important;
}

html body:not(.single-gallery) .main-header #site-title,
html body:not(.single-gallery) .main-header #site-title.clearfix {
  all: unset;
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
}

html body:not(.single-gallery) .main-header #branding a,
html body:not(.single-gallery) .main-header #site-title a {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body:not(.single-gallery) .main-header.alts-scrolled #branding {
  top: 16px !important;
}

html body:not(.single-gallery) .main-header img.logo:not(.logo-retina) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
}
html body:not(.single-gallery) .main-header img.logo-retina {
  display: block !important;
  height: var(--alts-hdr-logo-h) !important;
  max-height: var(--alts-hdr-logo-h) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}
html body:not(.single-gallery) .main-header.alts-scrolled img.logo-retina {
  height: 48px !important;
  max-height: 48px !important;
}

html body:not(.single-gallery) .main-header nav#navigation,
html body:not(.single-gallery) .main-header #navigation.clearfix {
  all: unset;
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  top: 100px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  z-index: 1000 !important;
}

html body:not(.single-gallery) .main-header.alts-scrolled nav#navigation,
html body:not(.single-gallery) .main-header.alts-scrolled #navigation.clearfix {
  top: 50% !important;
}

html body:not(.single-gallery) .main-header nav#navigation > ul,
html body:not(.single-gallery) .main-header #navigation ul.sf-menu,
html body:not(.single-gallery) .main-header #navigation .navigation {
  all: unset;
  display: flex !important;
  align-items: center !important;
  gap: 36px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li,
html body:not(.single-gallery) .main-header #navigation ul.sf-menu > li {
  all: unset;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  list-style: none !important;
  transform: none !important;
  background: transparent !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li > a,
html body:not(.single-gallery) .main-header #navigation ul.sf-menu > li > a {
  all: unset;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--alts-hdr-icon-size) !important;
  height: var(--alts-hdr-icon-size) !important;
  color: #e8e8e8 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: color 0.18s ease, transform 0.18s ease !important;
  font-family: inherit;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li > a > i.fa-angle-down,
html body:not(.single-gallery) .main-header #navigation > ul > li > a > i.fa.fa-angle-down,
html body:not(.single-gallery) .main-header #navigation > ul > li > a > .caret,
html body:not(.single-gallery) .main-header #navigation a > i.fa-angle-down,
html body:not(.single-gallery) .main-header #navigation a > .caret {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li > a > i:not(.fa-angle-down):not(.caret),
html body:not(.single-gallery) .main-header #navigation > ul > li > a .fa-house,
html body:not(.single-gallery) .main-header #navigation > ul > li > a .fa-solid,
html body:not(.single-gallery) .main-header #navigation > ul > li > a [class*="fa-"]:not(.fa-angle-down) {
  font-size: var(--alts-hdr-icon-fontsize) !important;
  line-height: 1 !important;
  color: inherit !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li > a:hover,
html body:not(.single-gallery) .main-header #navigation > ul > li > a:focus,
html body:not(.single-gallery) .main-header #navigation > ul > li:hover > a,
html body:not(.single-gallery) .main-header #navigation > ul > li:focus-within > a {
  background: transparent !important;
  color: var(--alts-accent) !important;
  transform: scale(1.15) !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li.menu-item-has-children > a::after,
html body:not(.single-gallery) .main-header #navigation > ul > li > a.sf-with-ul::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--alts-accent);
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
html body:not(.single-gallery) .main-header #navigation > ul > li:hover > a::after,
html body:not(.single-gallery) .main-header #navigation > ul > li:focus-within > a::after {
  opacity: 1;
  transform: translateX(-50%) scale(1.4);
}

html body:not(.single-gallery) .main-header #navigation .sf-arrows > li > .sf-with-ul::before,
html body:not(.single-gallery) .main-header #navigation .sf-sub-indicator {
  display: none !important;
}

html body:not(.single-gallery) .main-header #navigation ul ul,
html body:not(.single-gallery) .main-header #navigation ul.sub-menu {
  all: unset;
  position: absolute !important;
  top: calc(100% + 24px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: block !important;
  min-width: 240px !important;
  padding: 8px !important;
  margin: 0 !important;
  list-style: none !important;
  background: rgba(10, 10, 10, 0.72) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border: 1px solid rgba(191, 255, 0, 0.15) !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 2px 0 rgba(191, 255, 0, 0.1) inset !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s !important;
  z-index: 1000 !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li.menu-item-has-children::after,
html body:not(.single-gallery) .main-header #navigation > ul > li:has(> ul)::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -24px;
  right: -24px;
  height: 28px;
  pointer-events: none;
}
html body:not(.single-gallery) .main-header #navigation > ul > li.menu-item-has-children:hover::after,
html body:not(.single-gallery) .main-header #navigation > ul > li.menu-item-has-children:focus-within::after,
html body:not(.single-gallery) .main-header #navigation > ul > li:has(> ul):hover::after,
html body:not(.single-gallery) .main-header #navigation > ul > li:has(> ul):focus-within::after {
  pointer-events: auto;
}

html body:not(.single-gallery) .main-header #navigation > ul > li:hover > ul,
html body:not(.single-gallery) .main-header #navigation > ul > li:focus-within > ul,
html body:not(.single-gallery) .main-header #navigation > ul > li:hover > .sub-menu,
html body:not(.single-gallery) .main-header #navigation > ul > li:focus-within > .sub-menu,
html body:not(.single-gallery) .main-header #navigation > ul > li > ul.sfHover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body:not(.single-gallery) .main-header #navigation ul ul li {
  all: unset;
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  position: relative !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
}

html body:not(.single-gallery) .main-header #navigation ul ul a {
  all: unset;
  cursor: pointer !important;
  display: block !important;
  padding: 12px 18px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
  font-family: inherit;
  white-space: nowrap !important;
  position: relative !important;
  background: transparent !important;
}

html body:not(.single-gallery) .main-header #navigation ul ul a > i.fa-angle-down,
html body:not(.single-gallery) .main-header #navigation ul ul a > .caret,
html body:not(.single-gallery) .main-header #navigation ul ul a > i.fa-angle-right {
  display: none !important;
}

html body:not(.single-gallery) .main-header #navigation ul ul a:hover,
html body:not(.single-gallery) .main-header #navigation ul ul a:focus {
  background: var(--alts-accent) !important;
  color: #000 !important;
  transform: translateX(2px) !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul.sub-menu,
html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

html body:not(.single-gallery) .main-header #navigation ul ul ul,
html body:not(.single-gallery) .main-header #navigation ul.sub-menu ul.sub-menu,
html body:not(.single-gallery) .main-header #navigation > ul > li > ul > li > ul,
html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul > li > ul,
html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul > li > ul.sub-menu {
  top: -8px !important;
  left: 100% !important;
  right: auto !important;
  margin-left: 8px !important;
  transform: none !important;
  -webkit-transform: none !important;
}

html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul > li > ul {
  left: auto !important;
  right: 100% !important;
  margin-left: 0 !important;
  margin-right: 8px !important;
}

html body:not(.single-gallery) .main-header #navigation ul ul li.menu-item-has-children::after,
html body:not(.single-gallery) .main-header #navigation ul ul li:has(> ul)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 14px;
  pointer-events: none;
}
html body:not(.single-gallery) .main-header #navigation ul ul li.menu-item-has-children:hover::after,
html body:not(.single-gallery) .main-header #navigation ul ul li:has(> ul):hover::after,
html body:not(.single-gallery) .main-header #navigation ul ul li.menu-item-has-children:focus-within::after,
html body:not(.single-gallery) .main-header #navigation ul ul li:has(> ul):focus-within::after {
  pointer-events: auto;
}

html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul > li.menu-item-has-children::after,
html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul > li:has(> ul)::after {
  left: auto;
  right: 100%;
  width: 14px;
}

html body:not(.single-gallery) .main-header #navigation ul ul li.menu-item-has-children > a::after,
html body:not(.single-gallery) .main-header #navigation ul ul li:has(> ul) > a::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
html body:not(.single-gallery) .main-header #navigation ul ul li:hover > a::after,
html body:not(.single-gallery) .main-header #navigation ul ul li:focus-within > a::after {
  opacity: 1;
}

html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul > li.menu-item-has-children > a::after,
html body:not(.single-gallery) .main-header #navigation > ul > li:nth-last-child(-n+2) > ul > li:has(> ul) > a::after {
  right: auto;
  left: 14px;
  transform: translateY(-50%) rotate(-135deg);
}

html body:not(.single-gallery) .main-header #navigation ul ul li:hover > ul,
html body:not(.single-gallery) .main-header #navigation ul ul li:focus-within > ul {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =========================================================
   FOOTER (non-single-gallery)
   ========================================================= */

body:not(.single-gallery) footer#colophon {
  background: rgba(0, 0, 0, 1) !important;
  border-top: 1px solid rgba(191, 255, 0, 0.2);
  padding: 20px 50px !important;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: auto !important;
  color: #bbb;
  font-size: 13px;
  font-family: Montserrat, system-ui, sans-serif;
  position: relative;
}

body:not(.single-gallery) footer#colophon::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--alts-accent) 50%, transparent);
  opacity: 0.35;
}

body:not(.single-gallery) .as-legend {
  display: none !important;
}

/* =========================================================
   KEYBOARD LEGEND (single-gallery only)
   ========================================================= */

body.single-gallery .as-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
  padding: 0;
  color: #aaa;
}
body.single-gallery .as-legend .lead {
  color: var(--alts-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

body.single-gallery .as-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: #ccc;
}

body.single-gallery .as-item kbd,
body.single-gallery .as-legend kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: linear-gradient(180deg, #222 0%, #151515 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: #fff;
  font-family: 'IBM Plex Mono', 'Menlo', monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  text-transform: none;
}
body.single-gallery .as-item kbd:hover,
body.single-gallery .as-legend kbd:hover {
  background: linear-gradient(180deg, var(--alts-accent) 0%, #a5e600 100%);
  color: #000;
  border-color: var(--alts-accent);
}

/* =========================================================
   FOOTER INFO + NAV (shared)
   ========================================================= */

.footer-info {
  color: #888;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.footer-info a,
.footer-info strong {
  color: var(--alts-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease;
}
.footer-info a:hover,
.footer-info strong:hover {
  color: #fff;
}

.footer-navigation {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.footer-navigation a {
  color: #ccc;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.12s ease;
}
.footer-navigation a:hover {
  color: var(--alts-accent);
}

@media (max-width: 900px) {
  body:not(.single-gallery) footer#colophon {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px !important;
    gap: 12px;
  }
  .footer-navigation {
    margin-left: 0;
  }
}

/* =========================================================
   SINGLE-GALLERY — player bits
   ========================================================= */

body.single-gallery,
html.single-gallery {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.single-gallery header.clearfix.main-header.blank-logo {
  position: fixed !important;
}
body.single-gallery #site-title,
body.single-gallery #site-title.clearfix {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.single-gallery header.entry-header-x {
  background: none;
  max-width: 100% !important;
  line-height: 120% !important;
  display: flex;
  align-items: center;
  padding: 1vw 6vw 1vw var(--altsounds-horizontal-gutter);
  position: fixed;
  bottom: 4vw;
  left: 0;
  z-index: 999999 !important;
}
body.single-gallery .as-floating-header {
  position: fixed !important;
  left: var(--altsounds-horizontal-gutter);
  bottom: 4vw;
  z-index: 3000 !important;
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1vw 6vw 1vw 0;
  line-height: 120%;
  max-width: 100%;
  pointer-events: none;
}
body.single-gallery .as-floating-header > * { pointer-events: auto; }
body.single-gallery .as-floating-header .tvlogo2 {
  position: fixed !important;
  top: 6vw !important;
  left: var(--altsounds-horizontal-gutter) !important;
  width: 6vw !important;
  height: auto !important;
  z-index: 3001 !important;
  display: block;
  transition: transform 0.25s ease;
}
body.single-gallery .as-floating-header .tvlogo2:hover { transform: scale(1.08); }
body.single-gallery .as-floating-header .entry-title {
  display: inline !important;
  opacity: 1;
  transition: opacity 0.6s ease;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  z-index: 3002 !important;
  transform: translateX(-20px);
}
body.single-gallery .as-floating-header .entry-title.as-title-hidden { opacity: 0; }
body.single-gallery h1.entry-title,
body.single-gallery h1.entry-title a {
  text-shadow: none;
  font-size: 1.3vw;
  padding-left: 1.3vw;
  color: #fff !important;
}

.video-info-wrapper {
  position: relative;
  z-index: 50;
  pointer-events: none !important;
}
.video-info-wrapper > .video-info-toggle,
.video-info-wrapper > .video-info-overlay.active,
.video-info-wrapper .video-info-toggle,
.video-info-wrapper .video-info-overlay.active {
  pointer-events: auto !important;
}
.video-info-wrapper .video-info-overlay:not(.active) {
  pointer-events: none !important;
}

.video-info-toggle {
  position: fixed;
  bottom: 7vw;
  right: 1vw;
  z-index: 9999;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2vw;
  border-radius: 50%;
  width: 3.6vw;
  height: 3.6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  pointer-events: auto !important;
}
.video-info-toggle:hover {
  color: var(--alts-accent);
  transform: scale(1.08);
}
.video-info-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  padding-top: 90px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.video-info-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}
.video-info-overlay::-webkit-scrollbar { width: 8px; }
.video-info-overlay::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.video-info-overlay::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }
.video-info-content {
  max-width: 800px;
  background: rgba(0, 0, 0, 0.6);
  padding: 30px 40px;
  border-radius: 15px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  line-height: 1.6;
  border: 0 solid #ccff00;
  overflow-y: auto;
  max-height: 80vh;
}

.video-info-overlay .as-info-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas: "thumb top" "full full";
  gap: 18px;
  align-items: stretch;
}
.video-info-overlay .as-info-thumb { grid-area: thumb; align-self: stretch; }
.video-info-overlay .as-info-top   { grid-area: top;   min-width: 0; }
.video-info-overlay .as-info-full  { grid-area: full;  min-width: 0; }
.video-info-overlay .as-info-thumb img {
  width: 100%;
  height: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
@media (max-width: 768px) {
  .video-info-overlay .as-info-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "thumb" "top" "full";
  }
  .video-info-overlay .as-info-thumb img {
    max-width: none;
    width: 100%;
    height: auto;
  }
  .video-info-toggle {
    font-size: 6vw;
    width: 10vw;
    height: 10vw;
    bottom: 8vw;
    right: 6vw;
  }
}

/* =========================================================
   #asplayer SIZING — Safari-safe (v12)

   v10/v11 had a `body.single-gallery #asplayer::before` pseudo with
   `inset: -6%` and `filter: blur(124px) saturate(1.8) contrast(1.2)`
   that produced an atmospheric blurred glow around the iframe. On
   Safari this pseudo created a paint layer that, combined with the
   .video-info-overlay's `backdrop-filter: blur(8px)`, caused Safari
   to truncate paint at a viewport boundary — everything below that
   boundary rendered black, INCLUDING modal content sitting visually
   above the page underneath.

   v12 removes the pseudo entirely. The base #asplayer rule keeps the
   iframe sized + positioned correctly; the inline `background:url(poster)`
   on #asplayer itself still provides the load-state poster preview.
   The atmospheric blur effect is gone. We can rebuild it on
   .entry-video::before later if missed (parent div doesn't trigger
   the Safari bug).
   ========================================================= */
body.single-gallery #asplayer {
  position: relative;
  overflow: hidden;
  background-position: center center !important;
  background-size: cover !important;
}
body.single-gallery #asplayer iframe {
  position: relative;
  z-index: 1;
}

.fluid-width-video-wrapper { z-index: 555 !important; }

@media (min-width: 992px) {
  #asplayer {
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }
}

@media only screen and (max-width: 991px) and (orientation: landscape) {
  body.nav-full-width #main { margin-top: -15px; padding-top: 0; }
  img.tvlogo { display: block !important; width: 7% !important; z-index: 9999 !important; }
  img.tvlogomobile { display: block !important; z-index: 666 !important; width: 7% !important; }
  #relatedGalleryImages,
  header.entry-header-x,
  #playButton, #pauseButton, #nextButton, #search, #randomizer,
  a#scroll_left, a#scroll_right,
  header.clearfix.main-header.blank-logo { display: none !important; }
  #unmuteButton { margin-left: 50px !important; }
  div#content { padding-top: 0 !important; }
  .fill-content-true.no-sidebar #primary .entry-video {
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
    margin-left: 15px !important;
  }
  div#thumbnails { pointer-events: none; transform: none; height: 1px !important; }
  #asplayer { position: fixed !important; top: 0 !important; }
}

/* =========================================================
   JETPACK INSTANT SEARCH
   ========================================================= */
div.jetpack-instant-search__search-results-secondary {
  display: none;
  max-width: 0 !important;
  width: 0 !important;
}
li.jetpack-instant-search__search-result.jetpack-instant-search__search-result-product { padding: 10px; }
img.jetpack-instant-search__search-result-product-img {
  border-radius: 25px !important;
  border: 1px solid #555555;
}
div.jetpack-instant-search__search-results-primary {
  width: 100% !important;
  max-width: 100% !important;
}
.jetpack-instant-search__search-results-wrapper {
  max-width: 100% !important;
  margin-top: 0 !important;
  border-radius: 25px !important;
}
.jetpack-instant-search__scroll-button {
  background: var(--alts-accent) !important;
  padding: 25px !important;
  border-radius: 25px !important;
}

/* =========================================================
   SEARCH RESULTS GRID
   ========================================================= */
.alt-sounds-search-results-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.alt-sounds-column {
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
  padding: 10px;
  border: none;
  background: transparent;
}
@media (max-width: 1023px) { .alt-sounds-column { flex: 1 1 calc(50% - 20px); } }
@media (max-width: 767px)  { .alt-sounds-column { flex: 1 1 calc(100% - 20px); } }
@media (min-width: 768px) {
  .alt-sounds-column img {
    width: 100%;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: brightness(60%);
  }
  .alt-sounds-column:hover img,
  .alt-sounds-column.highlighted img {
    transform: scale(1.1);
    filter: brightness(100%);
  }
}
.alt-sounds-column a { outline: none; }
.alt-sounds-column.highlighted { box-shadow: none; outline: none; }

/* =========================================================
   TYPOGRAPHY & GENERAL
   ========================================================= */

h1, h1 a:link, h1 a:visited {
  font-weight: 300;
  color: var(--alts-accent);
}
h1.page-title,
h1.entry-title { color: #fff !important; }
h2.entry-description {
  color: #fff !important;
  text-shadow: none;
  margin-top: -20px !important;
}
h1.page-title,
h1.entry-title,
h2.page-description,
h2.entry-description {
  padding-right: 0;
  text-shadow: none;
  line-height: 120% !important;
}
strong.title {
  font-weight: 300 !important;
  color: var(--alts-accent);
  font-size: 20px !important;
}
span.excerpt {
  position: relative;
  top: 5px !important;
  font-size: 14px !important;
}

i.fas { min-width: 16px; display: inline-block; }
i.fa.fa-angle-down { height: 16px; width: 10px; display: inline-block; }

#main { max-width: 100%; }
div#content { width: 100%; padding-top: 10px; }
#page img { width: 100%; }

#primary,
#sidebar .widget,
#nivoHolder,
.external-video { background: none; box-shadow: none; }

.entry-image { padding: 20px !important; margin: 0; }
.entry-content { color: #acacac; padding-top: 20px; }
header.entry-header,
header.page-header { padding: 0; margin-bottom: -20px; }

.pagination { padding-left: 50px; padding-bottom: 50px; }
.pagination span,
.pagination a {
  padding: 15px;
  font-size: 20px !important;
  font-weight: 300 !important;
}

div[id*="ajaxsearchlite"].asl_m { padding-left: 10px; width: 99%; }
div.asl_m.asl_w { padding-bottom: 50px; }
div#ajaxsearchpro1_1 { margin-top: 10px; }
div.probox { box-shadow: none !important; }

.searchresultsleft { padding-left: 280px; padding-right: 60px; }
.searchresults {
  background: rgba(0, 0, 0, 0.2);
  min-height: 120px;
  padding: 0 30px 8px;
}

.blog .date-badge,
.tag .date-badge,
.entry-meta,
hr.shortcode { border-color: transparent !important; }
.date-badge {
  background: rgba(0, 0, 0, 0.35) !important;
  color: var(--alts-accent) !important;
  padding: 15px;
  box-shadow: none !important;
  display: none;
}

img.is-thumb.img-color.loaded {
  border: 1px solid #666 !important;
  height: 155px !important;
  padding-right: 0 !important;
}
#thumbnailContainer { background: #000; }

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.column {
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  flex: 1 1 400px;
  width: 100%;
  column-gap: 20px;
  padding: 20px 20px 0;
}

.nav-full-width .left-sidebar #sidebar {
  position: fixed;
  width: 280px;
}

#thumbnails .controls a,
#showtitle .imagecaption,
#showlink,
#showtitle .more { display: none; }

.portfolio-list li.video .shadow a { background: #000 !important; }
ul#portfolioList.clearfix.portfolio-list {
  background: rgba(0, 0, 0, 0) !important;
  margin-top: -15px;
}

#fullsizeTimer { display: none; }
img.activeslide {
  background-repeat: repeat;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 200% !important;
  width: 200% !important;
  margin: auto !important;
}
body.background { background: #000 !important; }
#more { display: none; }

img.tvlogo,
img.tvlogomobile { display: none; }

/* =========================================================
   RESPONSIVE DESKTOP >=768px
   ========================================================= */
@media screen and (min-width: 768px) {
  #muteButton { display: none !important; }

  a.fsg-arrows-prev,
  a.fsg-arrows-next { border-radius: 50%; }
  a.fsg-arrows-prev { margin-left: 10px; }
  a.fsg-arrows-next { margin-right: 10px; }
  a.fsg-arrows-prev:hover,
  a.fsg-arrows-next:hover { opacity: 1 !important; }
  i.fas.fa-step-backward,
  i.fas.fa-step-forward { font-size: 18px !important; }

  a:hover, a:active { text-decoration: none !important; }

  #relatedGalleryImages { display: none; }
  #relatedGalleryImages div a img {
    border: 1px solid #666666;
    opacity: 0.6 !important;
    filter: grayscale(20%);
  }
  #relatedGalleryImages div a img:hover {
    border: 1px solid #c6ff2a;
    opacity: 1 !important;
    filter: none;
  }

  img.is-thumb.img-color.loaded {
    height: 180px !important;
    padding-right: 10px;
    border: 1px solid #acacac !important;
  }

  div#thumbnailcontainer { background: #000 !important; }
  div#primary.portfolio-one-column { top: 0 !important; }
  h2.entry-title { padding-top: 10px; }
  h2.entry-title a {
    padding-left: 10px !important;
    margin-left: 60px;
  }

  body:not(.tax-gallery-categories) h1.page-title {
    color: #fff !important;
    font-size: 1.2vw;
    margin: auto;
    padding-top: 3px;
  }

  figcaption.item-caption { background: rgba(0, 0, 0, 0.7) !important; }
  div.datebadge { display: none; }
  span.breadcrumb_last { display: none !important; }
  .blog h2.entry-title {
    height: 100% !important;
    color: #fff !important;
    padding-left: 0 !important;
  }
  strong.title a { color: #fff !important; }
  h2.entry-description { padding-bottom: 30px !important; }
  h3.related-title {
    padding-left: 24px;
    font-weight: bold !important;
    margin-top: 20px !important;
    color: #c6ff2a;
  }
  body:not(.single-gallery) div.clearfix.entry-meta.entry-meta-head {
    padding-top: 10px !important;
    display: block;
    z-index: 556;
  }
  button#mobileMenuButton { background: rgba(0, 0, 0, 0) !important; }
  i.fa.fa-times { position: absolute; top: 10px; right: 10px; }
}

/* =========================================================
   RESPONSIVE MOBILE <=991px
   ========================================================= */
@media (max-width: 991px) {
  div[id*="ajaxsearchlite"].asl_m { padding-left: 0; width: 100%; }
  .black-theme #responsiveTitle { display: none; }

  #searchsContainer {
    display: flex;
    z-index: 6666 !important;
    position: fixed;
    top: 0;
    right: 0;
  }
  #mobileSearchButton {
    position: sticky;
    height: 60px;
    width: 60px;
    background: none;
    border: 0;
    cursor: pointer;
    display: block;
    padding: 0;
    right: 0;
    top: 0;
    overflow: hidden;
    z-index: 2000;
    margin: -70px 0 0 0;
  }
  #buttonContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 0 !important;
    padding: 0 !important;
    left: 14px;
  }

  .control-button {
    display: inline-block;
    padding: 20px;
    margin-right: 0;
    font-size: 32px;
    color: #ccc;
    background: none;
    border: none;
  }
  .control-button i { background: none; }
  .control-button a { color: #ccc; text-decoration: none; }
  .control-button:hover,
  .control-button a:hover { color: #fff; }

  body.single-gallery div#content { margin-left: -13px; }
  body.single-gallery #relatedGalleryImages { display: none; }
  body.single-gallery .entry-header-x {
    position: relative;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1;
    display: block;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  body.single-gallery #sidebar { display: none !important; }
  body.single-gallery button#muteButton {
    position: fixed !important;
    top: 364px !important;
  }
  body.single-gallery #asplayer {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
    width: 90% !important;
    height: 90% !important;
  }
  body.single-gallery #superbgimage { display: none !important; }
  body.single-gallery { background: #000; }
  body.single-gallery div#showtitle { display: block; }
  body.single-gallery span.published { display: none; }
  body.single-gallery div#scanlines.published { display: none; }
  body.single-gallery i.fas.fa-hashtag { display: none !important; }

  .footer-navigation--true { display: none; }
  div.fsg-arrows { display: none; }
}

/* =========================================================
   RESPONSIVE SMALL MOBILE <=768px
   ========================================================= */
@media (max-width: 768px) {
  header.entry-header,
  header.page-header { padding: 20px !important; }
  header.entry-header-x {
    background: none !important;
    padding: 15px !important;
  }
  h1.page-title,
  h2.page-description,
  h2.entry-description { margin-left: 0; }
  .single-gallery h1.entry-title,
  .single-gallery h6 {
    font-size: 6vw !important;
    padding-left: 0;
  }
  #anchorTop { display: none !important; }
  div.clearfix.entry-meta.entry-meta-head { text-align: left !important; }
  div#sidebar.widget-area { display: none !important; }

  :root {
    --alts-hdr-pad-y: 16px;
    --alts-hdr-pad-x: 18px;
    --alts-hdr-logo-h: 42px;
    --alts-hdr-icon-size: 42px;
    --alts-hdr-icon-fontsize: 20px;
  }

  html body:not(.single-gallery) .main-header #branding {
    top: 20px !important;
    left: 20px !important;
  }
}

/* =========================================================
   TV MODES 1920x1080
   ========================================================= */
@media screen and (width: 1920px) and (height: 1080px) {
  div#thumbnails { pointer-events: none; transform: none; height: 1px !important; }
  a#scroll_left, a#scroll_right { display: none !important; }
  h1.page-title { font-size: 1.5vw !important; }
  .searchresultsleft { padding-left: 0 !important; }
  #anchorTop { display: none !important; }
  .nav-full-width .left-sidebar #sidebar { display: none !important; }
  div.clearfix.entry-meta.entry-meta-head { display: none !important; }
  .asl_w_container { display: none !important; }
  body { background: #000 !important; }
  #showtitle .imagetitle a {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  img.tvlogo { display: block; width: 7% !important; }
  div#site-title.clearfix,
  div#fullsizeTimerBG { display: none !important; }
  ul#menu-footer-menu.footer-navigation,
  span.footer-info { display: none !important; }
  footer#colophon { height: 35px !important; border-top: 0 !important; }
  div.fsg-arrows,
  nav#navigation,
  a#expander.slide-up { display: none !important; }
}

/* =========================================================
   TV MODES 3840x2160
   ========================================================= */
@media screen and (width: 3840px) and (height: 2160px) {
  div#thumbnails { pointer-events: none; transform: none; height: 1px !important; }
  a#scroll_left, a#scroll_right { display: none !important; }
  .searchresultsleft { padding-left: 0 !important; }
  #anchorTop { display: none !important; }
  .nav-full-width .left-sidebar #sidebar { display: none !important; }
  div.clearfix.entry-meta.entry-meta-head { display: none !important; }
  .asl_w_container { display: none !important; }
  body { background: #000 !important; }
  h1.page-title {
    font-size: 2.7vw !important;
    padding-left: 3.2vw;
  }
  #primary,
  .left-sidebar #primary,
  .left-sidebar #sidebar,
  .fullsize-gallery #primary,
  .fullsize-gallery #primary .entry-header {
    font-size: 2vw !important;
    line-height: 3vw !important;
    margin-left: 50px;
    margin-top: 50px;
  }
  #showtitle .imagetitle a {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 1vw 2vw;
  }
  img.tvlogo { display: block; width: 7% !important; }
  #welcomeTeaser .inner,
  #sidebar .max_widget_teaser .teaser,
  #showtitle .imagetitle {
    font-size: 2vw !important;
    line-height: 3vw !important;
    margin-bottom: 1vw;
    padding: 0 100px !important;
  }
  div#site-title.clearfix,
  div#fullsizeTimerBG { display: none !important; }
  ul#menu-footer-menu.footer-navigation,
  span.footer-info { display: none !important; }
  footer#colophon { height: 35px !important; border-top: 0 !important; }
  div.fsg-arrows,
  nav#navigation,
  a#expander.slide-up { display: none !important; }
}

/* =============================================================================
 * SAFARI BLACK-BAR FIX v2 — non-:has() (May 2026)
 * Confirmed via Safari live test: stripping body bg on single-gallery + setting
 * #000 on html eliminates the half-black overlay caused by iframe vs body-bg
 * compositing on Webkit. Safari live red-bg test proved body bg is the source.
 * ============================================================================= */
body.single-gallery {
    background: transparent !important;
    background-color: transparent !important;
}
html {
    background: #000 !important;
    background-color: #000 !important;
}

/* ----------- HIDE THE MOBILE NP-ROW EVERYWHERE BY DEFAULT --------- */
/* The .alts-mobile-nprow block is server-rendered into the chrome
 * cluster on every single-gallery page so the data is always there,
 * but only the portrait media query below opts in to showing it.
 * Desktop / landscape use the existing chrome cluster instead. */
.alts-mobile-nprow {
    display: none;
}

/* ----------- PORTRAIT (≤991px portrait) ----------- */
@media (max-width: 991px) and (orientation: portrait) {

    /* 1. UNLOCK SCROLL. v12 set body/html to overflow:hidden which
       locked the viewport. On portrait we need the page to scroll
       (so users can reach the info button, future content rails). */
    html, html.single-gallery, body.single-gallery {
        overflow: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        position: static !important;
    }

    /* 2. PLAYER RESET. v12's #asplayer rule put it at z-index:-9999
       (behind everything) and 90%/90% size — invisible. Restore the
       inline-style behavior: absolute-positioned inside the 16:9
       wrapper (.entry-video), filling 100%/100%. */
    body.single-gallery #asplayer {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        display: block !important;
    }

    /* 3. VIDEO WRAPPER. Make the 16:9 .entry-video sticky at the top
       of the viewport so it stays visible as the user scrolls the
       rest of the page below. Common YouTube-mobile pattern. */
    body.single-gallery .entry-video-wrapper {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #000 !important;
        z-index: 100 !important;
    }
    body.single-gallery .entry-video {
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 56.25% !important; /* 16:9 */
        margin: 0 !important;
    }

    /* 4. CONTENT / PRIMARY in normal flow */
    body.single-gallery #main,
    body.single-gallery #primary,
    body.single-gallery #content {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        top: auto !important;
    }

    /* 5. FLOATING HEADER — preference: chrome floats OVER
       the video like desktop. The wrapper is pointer-events:none so
       it doesn't block taps on the iframe, but children get
       pointer-events:auto for tap targets. */
    body.single-gallery .as-floating-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        height: 56.25vw !important;   /* match the 16:9 video region */
        padding: 0 !important;
        background: transparent !important;
        z-index: 200 !important;
        pointer-events: none !important;
        display: block !important;
    }
    body.single-gallery .as-floating-header > * {
        pointer-events: auto !important;
    }

    /* Logo — top-left over the video */
    body.single-gallery .as-floating-header .tvlogo2 {
        position: absolute !important;
        top: 10px !important;
        left: 12px !important;
        width: 36px !important;
        height: auto !important;
        z-index: 3001 !important;
        display: block !important;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
    }

    /* Title — bottom-left over the video */
    body.single-gallery .as-floating-header .entry-title {
        position: absolute !important;
        bottom: 8px !important;
        left: 12px !important;
        right: 56px !important;   /* leave space for info button */
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 3002 !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
    }
    body.single-gallery h1.entry-title,
    body.single-gallery h1.entry-title a {
        font-size: 14px !important;
        line-height: 1.25 !important;
        padding-left: 0 !important;
        color: #fff !important;
        font-weight: 600 !important;
        display: block !important;
        max-height: 2.5em !important;
        overflow: hidden !important;
    }

    body.single-gallery .video-info-toggle,
    body.single-gallery .video-info-wrapper {
        display: none !important;
    }

    /* Info overlay (the modal) — needs proper scroll on portrait */
    body.single-gallery .video-info-overlay {
        padding: 16px !important;
        padding-top: 24px !important;
    }
    body.single-gallery .video-info-overlay.active {
        align-items: flex-start !important;
    }
    body.single-gallery .video-info-content {
        max-height: none !important;
        padding: 20px !important;
        font-size: 14px !important;
        margin: 0 auto !important;
    }

    /* Hide the desktop bottom-header (#entry-header-x) — we're using
       the floating-header overlay instead. */
    body.single-gallery header.entry-header-x {
        display: none !important;
    }

    body.single-gallery #alts-playbar,
    body.single-gallery .alts-playbar {
        display: none !important;
    }

    /* The track is the ONE element we move out and want visible. */
    body.single-gallery .alts-playbar__track.alts-mobile-scrubber-relocated {
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        height: 4px !important;
        width: 100% !important;
        background: rgba(255,255,255,0.08) !important;
        cursor: pointer !important;
    }
    body.single-gallery .alts-playbar__track.alts-mobile-scrubber-relocated .alts-playbar__track-bg,
    body.single-gallery .alts-playbar__track.alts-mobile-scrubber-relocated .alts-playbar__track-buffered,
    body.single-gallery .alts-playbar__track.alts-mobile-scrubber-relocated .alts-playbar__track-fill {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
    }
    body.single-gallery .alts-playbar__track.alts-mobile-scrubber-relocated .alts-playbar__track-fill {
        background: var(--alts-accent, #BFFF00) !important;
        width: 0;
    }
    body.single-gallery .alts-playbar__track.alts-mobile-scrubber-relocated .alts-playbar__track-handle {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        background: var(--alts-accent, #BFFF00) !important;
        transform: translate(-50%, -50%) !important;
        box-shadow: 0 0 0 3px rgba(191,255,0,0.18) !important;
    }

    /* v18 — RAW playbar bg removed (only the scrubber + transport
       buttons should read; no glass panel). The body::before blurry
       poster bg shows through naturally. */
    body.single-gallery #alts-playbar,
    body.single-gallery .alts-playbar,
    body.single-gallery .alts-playbar__inner {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.single-gallery #alts-playbar,
    body.single-gallery .alts-playbar {
        position: fixed !important;
        top: 56.25vw !important;   /* directly under the 16:9 video */
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        min-height: 48px !important;
        z-index: 90 !important;     /* below sticky video (100), above body bg */
    }

    body.single-gallery #alts-playbar,
    body.single-gallery .alts-playbar,
    body.single-gallery .alts-playbar__inner,
    body.single-gallery article,
    body.single-gallery #main,
    body.single-gallery #content,
    body.single-gallery #primary {
        background: rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(20px) saturate(1.2) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
    }
    /* Article gets NO background — it's the scrollable shell behind
       which body::before paints the full blurry poster. */
    body.single-gallery article,
    body.single-gallery #main,
    body.single-gallery #content,
    body.single-gallery #primary {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Show the mobile NP row */
    body.single-gallery .alts-mobile-nprow {
        display: block !important;
        padding: 14px 18px 10px;
        margin: 0;
        text-align: left;
        position: relative;
        z-index: 80;  /* under the sticky video (100), above content */
    }

    /* Hide the desktop chrome on portrait — the mobile NP row replaces it */
    body.single-gallery .as-chrome-eyebrow,
    body.single-gallery .as-eyebrow-row,
    body.single-gallery .as-title-row,
    body.single-gallery .as-title-meta,
    body.single-gallery .as-more-by-artist,
    body.single-gallery .as-taunt,
    body.single-gallery .as-eyebrow-flavor,
    body.single-gallery .as-eyebrow-upnext,
    body.single-gallery [data-alts-np-mount="corner"],
    
    body.single-gallery .as-modal-pills-row,
    body.single-gallery .alts-channel-eyebrow,
    body.single-gallery .alts-channel-eyebrow-inner,
    html body.single-gallery .video-info-overlay div.as-modal-pills-row,
    html body.single-gallery .video-info-overlay div.alts-channel-pills,
    html body.single-gallery div.as-modal-pills-row,
    html body.single-gallery div.alts-channel-pills {
        display: none !important;
    }

    /* v22 — NP rail canon: stacked Inter Artist 600/95% + Title 400/55%
       opacity, no uppercase. Per memory note "NP-row title canon —
       track-row typography is stacked Inter Artist 600/95% + Title
       400/55%, no uppercase. Mirrors the NP widget."
       Sized up vs the 12px rail rows since this is the primary content
       below the video, not a row in a queue list. */
    body.single-gallery .alts-mobile-nprow__artist {
        display: block;
        font-family: Inter, system-ui, sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.15;
        color: rgba(255, 255, 255, 0.95) !important;
        text-decoration: none;
        margin: 0 0 2px;
        letter-spacing: -0.01em;
        text-shadow: none;
        text-transform: none;
    }
    body.single-gallery a.alts-mobile-nprow__artist:hover,
    body.single-gallery a.alts-mobile-nprow__artist:focus {
        color: var(--alts-accent, #BFFF00);
    }

    /* Song title — NP rail's "Inter 400 / 55%" canon. */
    body.single-gallery .alts-mobile-nprow__title {
        display: block;
        font-family: Inter, system-ui, sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.55) !important;
        margin: 0;
        letter-spacing: 0;
        text-shadow: none;
        text-transform: none;
    }

    /* Meta row — icon + text chips separated by · dots, all linked */
    body.single-gallery .alts-mobile-nprow__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        margin: 8px 0 0;
        padding: 0;
        font-size: 11px;
        line-height: 1.3;
        font-family: Inter, system-ui, sans-serif;
        color: rgba(255, 255, 255, 0.7);
    }
    body.single-gallery .alts-mobile-nprow__meta-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: rgba(255, 255, 255, 0.78);
        text-decoration: none;
        padding: 2px 0;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }
    body.single-gallery a.alts-mobile-nprow__meta-item:hover,
    body.single-gallery a.alts-mobile-nprow__meta-item:focus {
        color: var(--alts-accent, #BFFF00);
    }
    body.single-gallery .alts-mobile-nprow__meta-icon {
        font-size: 10px;
        opacity: 0.75;
    }
    body.single-gallery .alts-mobile-nprow__meta-sep {
        color: rgba(255, 255, 255, 0.32);
        margin: 0 2px;
    }

    body.single-gallery article {
        background: transparent !important;
        min-height: 100vh !important;
    }
    body.single-gallery::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image: var(--alts-poster-bg);
        background-size: cover;
        background-position: center;
        filter: blur(48px) brightness(0.5) saturate(1.2);
        transform: scale(1.1); /* slight overscan so the blur edges don't show */
        z-index: -1;
        pointer-events: none;
    }
}

@media (max-width: 991px) {
    body.single-gallery .alts-playbar__vol-track,
    body.single-gallery .alts-playbar__vol-bg,
    body.single-gallery .alts-playbar__vol-fill,
    body.single-gallery .alts-playbar__vol-handle,
    body.single-gallery [data-alts-playbar="vol-track"],
    body.single-gallery [data-alts-playbar="vol-fill"],
    body.single-gallery [data-alts-playbar="vol-handle"] {
        display: none !important;
    }
}

@media (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Kill desktop theme chrome on EVERY mobile page (including
       non-single-gallery). The mobile-menu plugin's existing rules
       had carveouts that let some pieces leak through; this is the
       site-wide nuke. */
    body header.main-header,
    body header.clearfix.main-header,
    body .main-header,
    body #navigation,
    body nav#navigation,
    body #branding,
    body #site-title,
    body #mobileMenuButton,
    body #responsiveTitle,
    body #searchsContainer:not(.alts-burger):not(.alts-mobile-logo) {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ----------- KILL THE DUPLICATE THEME CHROME ON SINGLE-GALLERY -----
 * v14: On single-gallery (MOBILE) the theme's main-header was leaking
 * through underneath the floating chrome — visible as "two logos /
 * two menus". Nuke them on mobile so the as-floating-header is the
 * sole chrome on phone single-gallery pages.
 *
 * v24 (May 2026): scoped the kill to ≤991px ONLY. Before v24, this
 * rule had no @media wrapper and was hiding the desktop main-header
 * + global nav menu (Home / Genres / Time Travel / Search) on every
 * single-gallery page — an over-aggressive carryover from the mobile
 * cleanup. Desktop now keeps its full chrome. */
@media (max-width: 991px) {
    body.single-gallery header.main-header,
    body.single-gallery header.clearfix.main-header,
    body.single-gallery header.main-header.blank-logo,
    body.single-gallery .main-header,
    body.single-gallery #navigation,
    body.single-gallery nav#navigation,
    body.single-gallery #branding,
    body.single-gallery #mobileMenuButton,
    body.single-gallery #searchsContainer,
    body.single-gallery #responsiveTitle {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 991px) and (orientation: landscape) {

    /* 1. Restore desktop full-bleed video. Undo the v12 ≤991px
       #asplayer z-index:-9999 / 90%/90% rule. */
    body.single-gallery #asplayer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        display: block !important;
    }

    /* 2. Hide our portrait NP-row block on landscape — the desktop
       chrome (.as-chrome-cluster + .as-chrome-eyebrow) handles it. */
    body.single-gallery .alts-mobile-nprow {
        display: none !important;
    }

    /* 3. Hide info modal + Mothership UFO access. The .video-info-toggle
       button has BOTH classes — single button opens both modal and
       Mothership. Plus the standalone Mothership-toggle attribute. */
    body.single-gallery .video-info-toggle,
    body.single-gallery .video-info-wrapper,
    body.single-gallery .video-info-overlay,
    body.single-gallery .video-info-content,
    body.single-gallery .as-mothership-toggle,
    body.single-gallery [data-alts-mothership-toggle],
    body.single-gallery .alts-playbar__btn[data-alts-playbar="mship"],
    body.single-gallery .alts-playbar [data-alts-mothership-toggle],
    
    body.single-gallery .alts-playbar__btn--info,
    body.single-gallery .alts-playbar [data-alts-playbar="info"] {
        display: none !important;
    }

    body.single-gallery .as-floating-header {
        position: fixed !important;
        top: auto !important;
        bottom: 4vw !important;
        left: var(--altsounds-horizontal-gutter, 3vw) !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        padding: 1vw 6vw 1vw 0 !important;
        background: transparent !important;
        z-index: 3000 !important;
        display: flex !important;
        align-items: center !important;
        gap: 1vw !important;
        pointer-events: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    body.single-gallery .as-floating-header > * {
        pointer-events: auto !important;
    }

    /* Chrome bits must remain visible — don't touch their `display`
       so the desktop flex/absolute positioning stays intact. */
    body.single-gallery .as-chrome-cluster,
    body.single-gallery .as-chrome-eyebrow,
    body.single-gallery .as-title-row,
    body.single-gallery .as-title-meta,
    body.single-gallery h1.entry-title,
    body.single-gallery .alts-np-widget,
    body.single-gallery [data-alts-np-mount="corner"] {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* v22 — TV LOGO. Switched from vh-based (iOS Safari is unreliable
       with vh during URL-bar shifts) to fixed px. 64px fits a phone
       landscape comfortably and reads as proper "TV station bug" mass.
       Ultra-high specificity + !important on every property so nothing
       upstream can override. */
    html body.single-gallery .as-floating-header .tvlogo2,
    html body.single-gallery .as-floating-header img.tvlogo2,
    html body.single-gallery .as-chrome-logo-link img.tvlogo2 {
        position: fixed !important;
        top: 14px !important;
        left: 16px !important;
        width: 64px !important;
        height: auto !important;
        z-index: 3001 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force title cluster + meta visible bottom-left. Override absolute
       positioning that was relative to the .as-floating-header. We pin
       the cluster directly to the VIEWPORT here. */
    html body.single-gallery .as-chrome-cluster {
        position: fixed !important;
        bottom: 14px !important;
        left: 16px !important;
        right: auto !important;
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        z-index: 3002 !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 70vw !important;
        pointer-events: auto !important;
    }
    html body.single-gallery .as-chrome-cluster .as-title-row,
    html body.single-gallery .as-chrome-cluster .as-title-row .entry-title,
    html body.single-gallery .as-chrome-cluster .as-title-meta {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.7) !important;
    }
    html body.single-gallery .as-chrome-cluster .as-title-row .entry-title {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
    }
    html body.single-gallery .as-chrome-cluster .as-title-meta {
        font-size: 11px !important;
        line-height: 1.3 !important;
        opacity: 0.85 !important;
    }

    /* Kill any legacy "img.tvlogo" rules from v12 that try to show
       a SECOND logo element (the markup uses .tvlogo2 now). */
    body.single-gallery img.tvlogo,
    body.single-gallery img.tvlogomobile {
        display: none !important;
    }
}