.media-gallery-widget, .media-gallery {
      --ui-bg: #18181a;
      --ui-panel: #212124;
      --ui-raised: #28282c;
      --ui-border: #36363b;
      --ui-text: #f4f4f5;
      --ui-muted: #a1a1aa;
      --ui-accent: #ff9900;
      --ui-accent-hover: #f07c00;

}
    .media-gallery-widget .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .media-gallery-widget .media-card {
      padding: 0; aspect-ratio: 16/9; position: relative; border: 1px solid var(--ui-border);
      border-radius: 4px; overflow: hidden; background: #09090a;
    }
    .media-gallery-widget .media-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .2s; }
    .media-gallery-widget .media-card:hover img { transform: scale(1.05); }
    .media-gallery-widget .media-card:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
    .media-gallery-widget .media-card .video-mark {
      position: absolute; inset: 0; display: grid; place-items: center; color: var(--ui-text);
      text-shadow: 0 1px 10px #000; font-size: 30px; background: #0003;
    }

    /* Root stays above Bootstrap's modal and backdrop. */
    .media-gallery {
      position: fixed; inset: 0; z-index: 2000; display: none;
      background: rgba(8, 8, 10, .84); color: var(--ui-text);
    }
    .media-gallery.is-open { display: grid; place-items: center; }
    /* Media STAGE (not the panel including its toolbar) is exactly 16:9.
       Reserve header/footer/thumbnail space before calculating maximum width. */
    .media-gallery__panel {
      --gallery-chrome: 68px; /* header + footer */
      position: relative;
      width: min(calc(100vw - 40px), calc((100dvh - var(--gallery-chrome) - 40px) * 16 / 9));
      display: grid; grid-template-rows: 34px auto 34px;
      background: #080809; border: 1px solid var(--ui-border);
      min-width: 0; min-height: 0;
    }
    .media-gallery__panel.has-thumbnails {
      --gallery-chrome: 132px;
      grid-template-rows: 34px auto 34px 64px;
    }
    .media-gallery__header, .media-gallery__footer {
      background: var(--ui-panel); display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .media-gallery__label {
      max-width: calc(100% - 94px); font-size: 12px; font-weight: 500;
      color: var(--ui-text); text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .media-gallery__footer { font-size: 12px; color: var(--ui-muted); }
    .media-gallery__header .gallery-icon-btn { position: absolute; right: 6px; }
    .media-gallery__footer-actions { position: absolute; right: 6px; height: 100%; display: flex; align-items: center; }
    .media-gallery .gallery-icon-btn {
      appearance: none; border: 0; background: transparent; color: var(--ui-muted);
      width: 34px; height: 30px; padding: 5px; display: inline-grid;
      place-items: center; cursor: pointer; border-radius: 3px;
    }
    .media-gallery .gallery-icon-btn:hover { color: var(--ui-accent); background: #ff990012; }
    .media-gallery .gallery-icon-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
    .media-gallery .gallery-icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
    .media-gallery__stage {
      aspect-ratio: 16/9; width: 100%; min-width: 0; min-height: 0;
      position: relative; background: #000; overflow: hidden; touch-action: pan-y;
    }
    .media-gallery__slide {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 240ms ease; pointer-events: none;
    }
    .media-gallery__slide.is-active { opacity: 1; pointer-events: auto; }
    .media-gallery__slide > img {
      display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
      object-fit: contain; user-select: none; -webkit-user-drag: none;
    }
    .media-gallery__slide .video-js { width: 100%; height: 100%; background: #000; }
    .media-gallery__slide .video-js .vjs-tech { object-fit: contain; }
    /* The video fills the 16:9 stage edge-to-edge: no rounded corners inside
       the panel (overrides the 10px radius from catalog.css). */
    .media-gallery__panel .video-js .vjs-tech,
    .media-gallery__panel .video-js.vjs-theme-sea .vjs-poster img {
      border-radius: 0;
    }
    .media-gallery__slide .gallery-error { color: var(--ui-muted); font-size: 13px; }

    /* Edge controls are invisible until the pointer is over the corresponding
       side. Their hit areas still work when invisible. Fade both arrow and
       edge-to-center gradient in/out together. */
    .media-gallery__arrow {
      --gradient-overhang: 0px;
      position: absolute; top: 0; bottom: 0;
      width: clamp(52px, 16%, 230px); z-index: 3;
      appearance: none; border: 0; padding: 0;
      background: transparent; cursor: pointer; color: #e1e1e6;
      display: grid; place-items: center;
      opacity: 0;
      transition: opacity 240ms ease, color 170ms ease;
    }
    .media-gallery__arrow::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      bottom: calc(-1 * var(--gradient-overhang));
      pointer-events: none;
    }
    .media-gallery__arrow--prev { left: 0; }
    .media-gallery__arrow--next { right: 0; }
    .media-gallery__arrow--prev::before {
      background: linear-gradient(to right, rgba(0,0,0,.73), rgba(0,0,0,0));
    }
    .media-gallery__arrow--next::before {
      background: linear-gradient(to left, rgba(0,0,0,.73), rgba(0,0,0,0));
    }
    .media-gallery__arrow:hover,
    .media-gallery__arrow:focus-visible {
      opacity: .8; color: #fff;
    }
    .media-gallery__arrow:focus-visible {
      outline: 2px solid var(--ui-accent); outline-offset: -2px;
    }
    /* Video.js needs its bottom controls clickable. Keep the arrow hit area
       above the 52px controls, but extend its GRADIENT down to the stage edge,
       so there is no visible 40-52px notch on video slides. Equal top
       padding keeps arrow icons centered at precisely the same Y position. */
    .media-gallery__stage.is-video .media-gallery__arrow {
      --gradient-overhang: 52px;
      bottom: 52px; padding-top: 52px;
    }
    .media-gallery__arrow svg {
      position: relative; width: 54px; height: 88px; max-width: 76%;
      stroke: currentColor; fill: none; stroke-width: 3; pointer-events: none;
    }
    .media-gallery__strip {
      display: flex; justify-content: safe center; align-items: center; gap: 7px;
      padding: 7px 10px; overflow-x: auto; overflow-y: hidden;
      background: var(--ui-panel); scrollbar-width: thin; scrollbar-color: #55555d var(--ui-panel);
    }
    .media-gallery__strip[hidden] { display: none; }
    .media-gallery__thumb {
      padding: 0; position: relative; flex: 0 0 80px; aspect-ratio: 16/9;
      background: #0c0c0d; border: 2px solid transparent; border-radius: 3px;
      overflow: hidden; opacity: .60; cursor: pointer;
    }
    .media-gallery__thumb:hover { opacity: .9; }
    .media-gallery__thumb[aria-current="true"] { border-color: var(--ui-accent); opacity: 1; }
    .media-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .media-gallery__thumb .play-small {
      position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px;
      color: var(--ui-text); text-shadow: 0 0 5px black;
    }
    .media-card__placeholder, .media-gallery__thumb-placeholder {
      display: grid; place-items: center; width: 100%; height: 100%;
      font-size: 11px; letter-spacing: .08em; color: var(--ui-muted);
      background: radial-gradient(circle, #333338, #0c0c0d);
    }
    /* Hide Picture-in-Picture via CSS, without changing Video.js setup. */
    .media-gallery .vjs-picture-in-picture-control { display: none !important; }

    /* In fullscreen, leave the bottom-right corner of the Video.js control
       bar free for our exit button, so it never covers player controls. */
    .media-gallery:fullscreen .video-js .vjs-control-bar {
      padding-right: 54px;
    }

    /* Fixed bottom-right viewport corner for BOTH images and videos. */
    .media-gallery__fullscreen-exit {
      display: none; position: fixed; z-index: 3000;
      right: max(8px, env(safe-area-inset-right));
      bottom: max(4px, env(safe-area-inset-bottom));
      width: 30px; height: 30px; padding: 6px;
      appearance: none; border: 0; border-radius: 0;
      box-shadow: none; outline-offset: 2px;
      color: #fff; background: transparent; cursor: pointer;
      align-items: center; justify-content: center;
    }
    .media-gallery__fullscreen-exit svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
    .media-gallery__fullscreen-exit:hover { color: var(--ui-accent); background: #18181a; }
    .media-gallery__fullscreen-exit:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

    /* TRUE fullscreen: no 16:9 panel margins, header, footer, counter, or strip. */
    .media-gallery:fullscreen {
      display: block; width: 100vw; height: 100dvh; background: #000;
    }
    .media-gallery:fullscreen .media-gallery__panel {
      display: block; width: 100vw; height: 100dvh; max-width: none;
      border: 0; margin: 0;
    }
    .media-gallery:fullscreen .media-gallery__stage {
      width: 100vw; height: 100dvh; aspect-ratio: auto;
    }
    .media-gallery:fullscreen .media-gallery__header,
    .media-gallery:fullscreen .media-gallery__footer,
    .media-gallery:fullscreen .media-gallery__strip { display: none !important; }
    .media-gallery:fullscreen .media-gallery__fullscreen-exit { display: flex; }
    @media (max-width: 640px) {
      .media-gallery__panel {
        --gallery-chrome: 56px;
        width: min(calc(100vw - 16px), calc((100dvh - var(--gallery-chrome) - 16px) * 16 / 9));
        grid-template-rows: 28px auto 28px;
      }
      .media-gallery__panel.has-thumbnails {
        --gallery-chrome: 106px; grid-template-rows: 28px auto 28px 50px;
      }
      .media-gallery__arrow { width: clamp(42px, 17%, 80px); }
      .media-gallery__arrow svg { width: 40px; height: 80px; }
      .media-gallery__thumb { flex-basis: 65px; }
      .media-gallery-widget .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .media-gallery__slide, .media-gallery__arrow { transition: none; }
    }
  
.media-gallery [hidden] { display: none !important; }
.media-gallery__slide > video { width: 100%; height: 100%; object-fit: contain; }
.media-gallery-widget .media-card { cursor: pointer; }