/* ═══════════════════════════════════════════════════════════════════════
   SM2K-OG Theme
   1:1 port of the original Stream Monkey 2000 prototype (Towel's Network).
   Applied when <html class="theme-sm2k-og"> is set.

   Loads AFTER bundled main.css (link at end of body).
   .theme-sm2k-og X always beats bare X on specificity.
   ═══════════════════════════════════════════════════════════════════════ */

.theme-sm2k-og {
  --og-bar-blue:     #486faf;
  --og-menu-bg:      #253a5b;
  --og-menu-hover:   #1e2e48;
  --og-option-hover: #354764;
  --og-panel-blue:   #445c82;
  --og-text:         #ffffff;
  --og-accent:       yellow;
}

/* ── Body / scroll container setup ─────────────────────────────────── */
/* html stays at viewport size (becomes scroll container).              */
/* body grows with content, overflows html → html scrolls.              */
html.theme-sm2k-og {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
html.theme-sm2k-og body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
.theme-sm2k-og body,
.theme-sm2k-og #root {
  background: #000 !important;
}

/* ── WebGL background canvas ───────────────────────────────────────── */
/* Keep default position:fixed and z-index:-1 from App.css.            */
/* Only override height to 125vh (OG extends past viewport).           */
/* WebGL renders at 300x150 (set in JS) for the OG pixelated look.     */
.theme-sm2k-og #myCanvas {
  height: 125vh !important;
}

/* ── Header WebGL canvas — OG: z-index 0 ──────────────────────────── */
.theme-sm2k-og #header-canvas {
  z-index: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════ *
 *  MAIN BAR                                                          *
 *  OG: 45px, main-bar.png bg at 54%, torn-paper border via           *
 *  border-image with outset 14px below the bar.                      *
 *                                                                     *
 *  Don't touch border-image-source — the default webpack-processed   *
 *  URL from App.css already works. Only override the geometry.        *
 * ════════════════════════════════════════════════════════════════════ */
.theme-sm2k-og #main-bar {
  height: 55px !important;
  background-color: #486faf !important;
  background-size: 54% !important;
  /* border geometry — torn paper edge flush at bottom */
  border-bottom-width: 16px !important;
  border-bottom-style: solid !important;
  border-bottom-color: transparent !important;
  border-image-slice:  10 !important;
  border-image-width:  0 0 auto 0 !important;
  border-image-outset: 0 0 8px 0 !important;
  border-image-repeat: repeat !important;
  /* White glow shadow */
  box-shadow: 0px 14px 13px 12px rgba(255, 255, 255, 0.226) !important;
  font-family: "arial-black", "Arial Black", Arial, sans-serif;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.theme-sm2k-og #main-bar h1 {
  color: #ffffff;
  margin-top: 0px;
  padding-top: 5px !important;
  font-size: 45px;
  font-family: "arial-black", "Arial Black", Arial, sans-serif;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    -1px  0px 2px  #000,
     1px  1px 30px #07a,
     0px  4px 0    #000,
     0px  1px 0    #000;
}

/* ════════════════════════════════════════════════════════════════════ *
 *  HEADER — OG: 100px tall, water wave via WebGL header-canvas       *
 * ════════════════════════════════════════════════════════════════════ */
.theme-sm2k-og #header {
  position: fixed !important;
  top: -5px !important;
  left: 0 !important;
  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;
  padding: 0 !important;
  padding-top: 1% !important;
  margin: 0 !important;
  /* Transparent bg — WebGL canvas provides the water texture */
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: inset -1px 14px 15px 20px rgb(30 30 30 / 40%) !important;
  border-bottom: 0px solid transparent !important;
  z-index: 2 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Nav buttons — OG layout ───────────────────────────────────────── */
.theme-sm2k-og #buttons {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 65px !important;
  z-index: 1;
  position: relative;
  font-family: sans-serif;
  color: #ffffff;
}
.theme-sm2k-og #buttons li {
  display: inline-block !important;
}
.theme-sm2k-og #buttons li:last-child {
  float: right !important;
  margin-right: 15px;
}
.theme-sm2k-og #buttons li button,
.theme-sm2k-og .nav-icon-btn {
  display: inline-flex !important;
  align-items: center;
  background-color: black !important;
  color: white !important;
  border: 4px solid black !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: sans-serif;
  font-size: 13px;
  padding: 2px 10px !important;
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.theme-sm2k-og #buttons li button:hover,
.theme-sm2k-og .nav-icon-btn:hover {
  background-color: #111 !important;
}
.theme-sm2k-og #buttons li button:active,
.theme-sm2k-og .nav-icon-btn:active {
  background-color: yellow !important;
  color: black !important;
}
.theme-sm2k-og .nav-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* Hide zoom controls — OG didn't have them */
.theme-sm2k-og #buttons li.nav-scale {
  display: none !important;
}

/* ── Wrapper — transparent so WebGL canvas shows through ───────────── */
.theme-sm2k-og #wrapper {
  top: 155px !important;
  bottom: 0 !important;
  /* Neutralize inline uiScale transform — OG has fixed content sizing */
  transform: none !important;
}

/* ── Content — OG: 720x555 black panel ─────────────────────────────── */
.theme-sm2k-og #content {
  background-color: black !important;
  display: block !important;
  position: relative;
  padding-bottom: 29px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  font-family: sans-serif;
  font-size: 20px;
  color: #ffffff;
  box-shadow: 1px 0px 30px 16px rgba(30, 30, 30, 0.3);
  width: 720px !important;
  height: 555px !important;
  z-index: 2;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.theme-sm2k-og #content p {
  margin: 0;
  padding: 3px;
}
.theme-sm2k-og #content .video-js {
  top: 0%;
  left: 0%;
  text-align: center;
  margin: 0;
  position: relative;
}

/* ── Footer — hidden (OG had it commented out) ─────────────────────── */
.theme-sm2k-og #footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* ── Padding spacer ────────────────────────────────────────────────── */
.theme-sm2k-og #padding {
  display: block !important;
  height: 80px;
  width: 640px;
  margin: 5% auto 0;
}

/* ── SM2K panels ───────────────────────────────────────────────────── */
.theme-sm2k-og .admin-layout .admin-col,
.theme-sm2k-og .stream-card,
.theme-sm2k-og .profile-section,
.theme-sm2k-og .vod-show-card,
.theme-sm2k-og .tv-broadcast-section,
.theme-sm2k-og .epg-panel,
.theme-sm2k-og .chat-panel,
.theme-sm2k-og .login-box,
.theme-sm2k-og .register-box,
.theme-sm2k-og .recovery-box {
  background: #000 !important;
  border: 4px solid var(--og-panel-blue) !important;
  border-radius: 0 !important;
  box-shadow: 1px 0px 30px 16px rgba(30, 30, 30, 0.3);
  color: #ffffff;
  font-family: sans-serif;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.theme-sm2k-og .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.theme-sm2k-og .modal-content,
.theme-sm2k-og .modal-box {
  background: #000 !important;
  color: #ffffff;
  border: 4px solid var(--og-panel-blue) !important;
  border-radius: 0 !important;
  box-shadow: 1px 0px 30px 16px rgba(30, 30, 30, 0.3);
  font-family: sans-serif;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Channel overlay bar ───────────────────────────────────────────── */
.theme-sm2k-og .ch-overlay {
  background-color: var(--og-panel-blue) !important;
  background-image: url("/imgs/water.png") !important;
  background-repeat: repeat !important;
  box-shadow: inset -1px 14px 15px 20px rgb(30 30 30 / 40%) !important;
  border-top: 4px solid black !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.theme-sm2k-og .ch-overlay button {
  background-color: black;
  color: white;
  border: 4px solid black;
  border-radius: 0;
  font-family: sans-serif;
  cursor: pointer;
}
.theme-sm2k-og .ch-overlay button:hover {
  background-color: #111;
}
.theme-sm2k-og .ch-overlay button:active {
  background-color: yellow !important;
  color: black;
}

/* ── Generic buttons ───────────────────────────────────────────────── */
.theme-sm2k-og button {
  background-color: black;
  color: white;
  border: 4px solid black;
  border-radius: 0 !important;
  font-family: sans-serif;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.theme-sm2k-og button:hover {
  background-color: #111;
}
.theme-sm2k-og button:active {
  background-color: yellow !important;
  color: black;
}

/* ── Form inputs ───────────────────────────────────────────────────── */
.theme-sm2k-og input[type="text"],
.theme-sm2k-og input[type="password"],
.theme-sm2k-og input[type="number"],
.theme-sm2k-og input[type="email"],
.theme-sm2k-og select,
.theme-sm2k-og textarea {
  background: #000;
  border: 4px solid var(--og-panel-blue);
  border-radius: 0 !important;
  color: #ffffff;
  font-family: sans-serif;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.theme-sm2k-og input[type="text"]:focus,
.theme-sm2k-og input[type="password"]:focus,
.theme-sm2k-og input[type="number"]:focus,
.theme-sm2k-og input[type="email"]:focus,
.theme-sm2k-og select:focus,
.theme-sm2k-og textarea:focus {
  outline: 2px solid yellow;
}

/* ── Category pills ────────────────────────────────────────────────── */
.theme-sm2k-og .cat-pill {
  background: #000;
  color: #fff;
  border: 4px solid black;
  border-radius: 0;
  font-family: sans-serif;
}
.theme-sm2k-og .cat-pill.active,
.theme-sm2k-og .cat-pill:hover {
  background: yellow;
  color: #000;
  border-color: black;
}

/* ── Random msg above video ────────────────────────────────────────── */
.theme-sm2k-og #content > p#d {
  margin: 0;
  padding: 8px 12px 4px;
  text-align: center;
  font-family: sans-serif;
  font-size: 20px;
  color: #ffffff;
  min-height: 29px;
  position: relative;
  z-index: 3;
}
.theme-sm2k-og #content > p#d canvas {
  display: none !important;
}
.theme-sm2k-og .sm2k-og-msg {
  display: inline-block;
  white-space: pre-wrap;
  word-break: break-word;
  color: #ffffff;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.25;
}

/* ── EPG overlay ───────────────────────────────────────────────────── */
.theme-sm2k-og .epg-overlay {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Links ─────────────────────────────────────────────────────────── */
.theme-sm2k-og a:link,
.theme-sm2k-og a:visited {
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════ *
 *  MOBILE RESPONSIVE                                                 *
 *  Scale the fixed 720x555 content box to fit mobile viewports       *
 * ════════════════════════════════════════════════════════════════════ */

/* Admin page mobile scroll fix — iOS doesn't handle nested scroll         */
/* containers well. Force scroll to happen at body/root level, not inside  */
/* .admin-page or its columns.                                             */
@media (max-width: 640px) {
  .theme-sm2k-og .admin-page {
    overflow: visible !important;
    height: auto !important;
    min-height: 100svh !important;
  }
  .theme-sm2k-og .admin-body {
    overflow: visible !important;
    height: auto !important;
  }
  .theme-sm2k-og .admin-col,
  .theme-sm2k-og .admin-col--left,
  .theme-sm2k-og .admin-col--mid,
  .theme-sm2k-og .admin-col--right {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  .theme-sm2k-og .stream-list {
    overflow-y: visible !important;
    max-height: none !important;
  }
}

/* ── Mobile: homepage content box fits viewport (both orientations) ── */
@media (max-width: 720px) {
  /* Compact main bar */
  .theme-sm2k-og #main-bar {
    height: 36px !important;
  }
  .theme-sm2k-og #main-bar h1 {
    font-size: 28px;
    padding-top: 2px !important;
  }
  /* Compact header — just enough room for nav buttons */
  .theme-sm2k-og #header {
    top: 36px !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  .theme-sm2k-og #buttons {
    padding-top: 32px !important;
  }
  /* Wrapper fills everything below header, no bottom reserved */
  .theme-sm2k-og #wrapper {
    top: 96px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    justify-content: flex-start !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }
  /* Content box: fit viewport width, auto height, flex column so video shrinks */
  .theme-sm2k-og #content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 112px) !important;
    max-height: calc(100dvh - 112px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-bottom: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }
  /* OG msg: compact, fixed height above video */
  .theme-sm2k-og #content > p#d {
    flex-shrink: 0;
    min-height: 24px;
    font-size: 12px;
    padding: 4px 8px 2px !important;
  }
  .theme-sm2k-og .sm2k-og-msg {
    font-size: 12px;
  }
  /* Player container + video: fill remaining height, maintain aspect */
  .theme-sm2k-og .player-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
  }
  .theme-sm2k-og #content .video-js,
  .theme-sm2k-og #content video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  /* Ch-overlay (channel controls) */
  .theme-sm2k-og .ch-overlay {
    font-size: 11px;
  }
}

/* Landscape phones — even tighter to prioritize video */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .theme-sm2k-og #main-bar {
    height: 28px !important;
  }
  .theme-sm2k-og #main-bar h1 {
    font-size: 20px;
    padding-top: 0 !important;
  }
  .theme-sm2k-og #header {
    top: 28px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .theme-sm2k-og #buttons {
    padding-top: 18px !important;
  }
  .theme-sm2k-og #wrapper {
    top: 68px !important;
  }
  .theme-sm2k-og #content {
    max-height: calc(100vh - 80px) !important;
    max-height: calc(100dvh - 80px) !important;
  }
  .theme-sm2k-og #content > p#d {
    min-height: 18px;
    font-size: 11px;
    padding: 2px 6px 1px !important;
  }
  .theme-sm2k-og .sm2k-og-msg {
    font-size: 11px;
  }
}

/* ── My Shows page ───────────────────────────────────────────────────── */
/* Map the page's --ms-* tokens onto the OG palette.                       */
.theme-sm2k-og {
  --ms-topbar-bg:        var(--og-menu-bg);
  --ms-topbar-border:    var(--og-bar-blue);
  --ms-section-bg:       var(--og-menu-bg);
  --ms-section-border:   var(--og-bar-blue);
  --ms-card-bg:          var(--og-panel-blue);
  --ms-card-border:      var(--og-bar-blue);
  --ms-input-bg:         var(--og-menu-hover);
  --ms-input-border:     var(--og-option-hover);
  --ms-input-fg:         var(--og-text);
  --ms-btn-bg:           var(--og-option-hover);
  --ms-btn-bg-hover:     var(--og-bar-blue);
  --ms-btn-border:       var(--og-bar-blue);
  --ms-btn-fg:           var(--og-text);
  --ms-back-btn-bg:      var(--og-option-hover);
  --ms-back-btn-fg:      var(--og-accent);
  --ms-heading-fg:       var(--og-accent);
  --ms-show-name-fg:     var(--og-text);
  --ms-text-muted:       #cce0ff;
  --ms-text-faint:       #8aa6cc;
  --ms-pill-bg:          var(--og-option-hover);
  --ms-pill-border:      var(--og-bar-blue);
  --ms-pill-fg:          var(--og-text);
  --ms-progress-bg:      var(--og-menu-hover);
  --ms-progress-fill:    var(--og-accent);
}
/* OG: section headings get the iconic yellow accent */
.theme-sm2k-og .ms-section h3,
.theme-sm2k-og .ms-topbar h2 {
  color: var(--og-accent);
  font-family: "Courier New", monospace;
}

/* ════════════════════════════════════════════════════════════════════ *
 * iOS / mobile OG fix: stack main-bar → water-strip → wrapper cleanly  *
 * with proper safe-area-inset-top offsets on iPhone (Dynamic Island).  *
 *                                                                      *
 * Existing 720px OG rule sets #main-bar=36px, #header(top:36,h:60),    *
 * #wrapper(top:96). On iOS the App.css mobile rule adds                *
 * padding-top:safe-area to main-bar — content-box default makes the    *
 * element ~95px tall on iPhone 17 instead of 36px. That pushed the     *
 * water strip too tall AND made #header overlap #wrapper, blocking     *
 * scroll touches in the top ~50px of the scrollable area.              *
 *                                                                      *
 * Layout (Y from viewport top):                                        *
 *   0 .. safe-area+36         : main-bar (title visible below chrome)  *
 *   safe-area+36 .. +66       : 30px water-strip (#header)             *
 *   safe-area+66 .. bottom-0  : scrollable content (#wrapper)          *
 *                                                                      *
 * NOTE: src/sm2k-og.css is DEAD CODE (no import). This file (public/)  *
 * is the runtime-loaded one. Edit BOTH if you keep the dead copy.      *
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Main-bar: keep App.css's `background-size: auto 100%` (aspect-locked
     fit to height) — overriding it caused the texture to look gritty/
     garbled. Just restore the torn-paper border-image with mobile-scaled
     geometry (App.css mobile wipes it via `border-image: none` shorthand). */
  /* Main-bar: render the felt source at natural pixel scale so it looks
     smooth instead of gritty. `cover` at mobile widths crushes the
     720x200 felt down to 0.55× scale, which makes the felt grain
     render as sandpaper. At natural scale we just show a centered
     viewport-sized slice of the smooth middle of the source.
     z-index above #header so the canvas's clear-buffer top hides
     BEHIND the main-bar. Border-image stack is REMOVED — the torn
     paper is now painted via ::after below at the same natural scale
     and centered position so the felt grain lines up across the join. */
  .theme-sm2k-og #main-bar {
    height: 44px !important;
    background-size: auto auto !important;     /* natural 720x200 */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 5 !important;
    border: 0 !important;
    border-image: none !important;
    box-shadow: none !important;   /* kill the OG-desktop white halo on mobile —
                                       it bleeds between main-bar and the torn-paper
                                       ::after, making the edge look detached. */
  }
  /* Torn-paper edge as a pseudo-element. The source main-bar_border.png
     is 718x25 — top ~15px is felt, bottom ~10px is the jagged torn edge
     with transparent alpha. We render the source at NATURAL size (25px)
     but make the ::after only as tall as the torn portion and use
     `background-position: bottom` so only the torn area is visible.
     This avoids the felt-to-felt seam between main-bar and the border
     source (different images → different grain) by simply not showing
     the border's felt at all. */
  .theme-sm2k-og #main-bar::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    height: 11px !important;
    background-image: url('./imgs/main-bar_border.png') !important;
    background-size: auto auto !important;          /* natural 718x25 */
    background-position: center bottom !important;  /* show only torn bottom */
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 6 !important;
  }
  .theme-sm2k-og #main-bar h1 {
    padding-top: 4px !important;
    font-size: 24px !important;
  }
  /* Header: extend the canvas UP behind the main-bar so its clear-buffer
     top half is hidden. Canvas total ~60px → main-bar covers top 36px,
     bottom 24px shows the wave-active band. */
  .theme-sm2k-og #header {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    height: 60px !important;
    min-height: 60px !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  /* Hamburger sits in the visible bottom 24px of the header (waves zone),
     padding-top pushes it past the main-bar overlap (top 36px). */
  .theme-sm2k-og #buttons {
    padding-top: 38px !important;
  }
  /* Nav button compact enough to fit inside the 24px wave band. */
  .theme-sm2k-og #buttons li button,
  .theme-sm2k-og .nav-icon-btn {
    padding: 1px 6px !important;
    font-size: 11px !important;
    border-width: 2px !important;
  }
  /* Wrapper: starts right below the visible wave band (main-bar 44 +
     visible 24 + safe-area). Add overflow-y:auto + touch scrolling
     because App.css mobile sets #wrapper{position:fixed; overflow:hidden}
     and OG's html-scrolls-body strategy doesn't kick in then. */
  .theme-sm2k-og #wrapper {
    top: calc(68px + env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Content cap: stream player is flex-grow inside #content, so an
     unbounded max-height makes the player swallow the entire viewport.
     Cap at ~45dvh so the player ends up roughly 16:9-ish at iPhone
     widths AND leaves space for creator-videos to be visible below
     without the user having to pinch-zoom out. The 720px-OG rule's
     `calc(100vh - 112px)` was the wrong shape — it sized to wrapper,
     not to the player's natural aspect. */
  /* Content panel: at 100% mobile scale the black bg blends straight into
     the dark WebGL aurora bg and the player box looks invisible (only
     "Go watch invincible" floats with no container). Give it the same
     blue border as .stream-card so the edges contrast against WebGL,
     and force a visible min-height so the box exists even when no
     stream is loaded (player-wrap is flex:1 1 auto + min-height:0 → would
     shrink to 0 without natural content). */
  .theme-sm2k-og #content {
    border: 3px solid var(--og-panel-blue) !important;
    min-height: 30dvh !important;
    min-height: 30vh !important; /* fallback */
    max-height: 50dvh !important;
    max-height: 50vh !important; /* fallback */
    margin: 8px !important;       /* breathing room against viewport edge */
    box-sizing: border-box !important;
  }
  /* iOS shrink-to-fit auto-zooms the whole page when any element is wider
     than the viewport, even with overflow-x:hidden on html/body. The desktop
     rule #padding{width:640px} forces 640px of horizontal layout on a 393px
     iPhone viewport, which is what was triggering the "page zoom out" on
     iOS Safari. Collapse it on mobile so the page lays out at viewport
     width and renders at native scale. */
  .theme-sm2k-og #padding {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 0 !important;
  }
}