/* ToiletNozoki Luxe Dark 1.0.26
   Native Piwigo picture page, styled WITHOUT moving DOM nodes.
   This intentionally preserves the structure expected by Modus and VideoJS. */

:root {
  --tnx-pic-bg:#09090c;
  --tnx-pic-surface:#121015;
  --tnx-pic-surface-2:#18131a;
  --tnx-pic-line:rgba(223,121,171,.13);
  --tnx-pic-text:#eee7eb;
  --tnx-pic-muted:#aa9ea7;
  --tnx-pic-pink:#df79ab;
}

body {
  background:
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 220px),
    var(--tnx-pic-bg);
  color:var(--tnx-pic-text);
}

/* Let the native picture page use the viewport instead of Modus' old side-by-side width. */
#content,
#content.contentWithMenu {
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
}

/* Header / toolbar stay native, just aligned with the new content width. */
#imageHeaderBar,
#imageToolBar {
  width:min(1180px,calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

#imageHeaderBar {
  padding-top:8px;
}

#imageHeaderBar .browsePath,
#imageHeaderBar h2 {
  color:#d9cfd6;
}

#imageToolBar {
  min-height:36px;
  height:auto;
  padding:4px 0 7px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:transparent !important;
}

#imageToolBar .pwg-button {
  opacity:.78;
  transition:opacity .15s,color .15s;
}
#imageToolBar .pwg-button:hover {
  opacity:1;
  color:var(--tnx-pic-pink);
}

/* ---------------------------------------------------------
   MAIN MEDIA
   Piwigo's original DOM is kept intact.
   We only change the native wide side-by-side layout to vertical.
   --------------------------------------------------------- */
#theImageAndInfos,
html.wide #theImageAndInfos {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:min(1280px,calc(100% - 48px)) !important;
  max-width:1280px !important;
  margin:18px auto 0 !important;
  overflow:visible !important;
  gap:0 !important;
}

#theImage,
html.wide #theImage {
  order:1;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  box-sizing:border-box;
  background:transparent !important;
}

/* Do not create a giant decorative frame around empty space.
   The media itself is the focal object. */
#theImage > img,
#theImage > video,
#theImage .video-container,
#theImage .video-js {
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Native browser player used by current Piwigo VideoJS defaults.
   Override the plugin's derivative-size cap, but keep the video's own ratio. */
#theImage > video.video-js,
#theImage > video,
#theImage video.video-js:not(.vjs-tech) {
  display:block !important;
  width:auto !important;
  height:min(82vh,920px) !important;
  max-width:min(92vw,980px) !important;
  max-height:82vh !important;
  object-fit:contain !important;
  background:#000;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.42);
}

/* VideoJS 7 mode: keep its own responsive-ratio mechanism,
   but allow a much wider centered player than the derivative cap. */
#theImage .video-container {
  width:min(92vw,980px) !important;
  max-width:980px !important;
  display:flex !important;
  justify-content:center !important;
  margin:0 auto !important;
}

#theImage .video-container > .video-js,
#theImage .video-js.vjs-fluid {
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.42);
}

/* Ordinary images also become centered hero media, but are not upscaled blindly. */
#theImage #theMainImage,
#theImage > img:not(.img-loader-derivatives) {
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:min(92vw,1180px) !important;
  max-height:82vh !important;
  margin:0 auto !important;
  object-fit:contain !important;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.34);
}

/* Keep loaders/maps/comments around the media compatible with native behavior. */
#theImage .img-loader-derivatives {
  margin:40px auto !important;
}
#theImage .imageComment {
  max-width:920px;
  margin:14px auto 0;
  color:var(--tnx-pic-muted);
}

/* ---------------------------------------------------------
   INFO — BELOW MEDIA
   --------------------------------------------------------- */
#infoSwitcher {
  order:2;
}

#imageInfos,
html.wide #imageInfos {
  order:3;
  position:static !important;
  width:min(920px,100%) !important;
  max-width:920px !important;
  min-height:0 !important;
  margin:30px auto 0 !important;
  padding:22px 24px 20px !important;
  box-sizing:border-box;
  color:var(--tnx-pic-text);
  background:linear-gradient(180deg,rgba(25,20,27,.94),rgba(15,13,17,.94)) !important;
  border:1px solid var(--tnx-pic-line);
  border-radius:18px !important;
  box-shadow:0 14px 36px rgba(0,0,0,.24);
}

/* Previous / next thumbnails become a simple horizontal strip. */
#imageInfos .navThumbs,
html.wide #imageInfos .navThumbs {
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  padding:0 0 20px !important;
  margin:0 auto 18px !important;
  border-bottom:1px solid rgba(255,255,255,.055);
}

#imageInfos .navThumb,
html.wide #imageInfos .navThumb {
  float:none !important;
  width:92px !important;
  height:92px !important;
  margin:0 !important;
  border-radius:12px;
  overflow:hidden;
  position:relative;
}

#imageInfos .navThumb img,
html.wide #imageInfos .navThumb img {
  display:block;
  width:92px !important;
  height:92px !important;
  max-width:none !important;
  object-fit:cover;
  border-radius:12px;
}

#imageInfos .thumbHover,
html.wide #imageInfos .thumbHover {
  width:92px !important;
  height:92px !important;
  border-radius:12px;
  box-sizing:border-box;
}

/* Metadata: readable two-column rows instead of the narrow old sidebar. */
#imageInfos .imageInfoTable,
html.wide #imageInfos .imageInfoTable {
  display:block !important;
  width:100%;
  max-width:none;
  margin:0 !important;
  padding:0 !important;
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;
}

#imageInfos .imageInfo {
  display:grid !important;
  grid-template-columns:minmax(110px,150px) minmax(0,1fr);
  gap:10px 18px;
  align-items:start;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.045);
  line-height:1.55;
}

#imageInfos .imageInfo:last-child {
  border-bottom:0;
}

#imageInfos .imageInfo dt,
html.wide #imageInfos .imageInfo dt {
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  text-align:left !important;
  color:var(--tnx-pic-muted);
  font-weight:650;
}

#imageInfos .imageInfo dd,
html.wide #imageInfos .imageInfo dd {
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  text-align:left !important;
  color:var(--tnx-pic-text);
  min-width:0;
  overflow-wrap:anywhere;
}

#imageInfos .imageInfo ul {
  margin:0;
  padding:0;
  list-style:none;
}

#imageInfos a {
  color:#ef9ac1;
}
#imageInfos a:hover {
  color:#ffb2d2;
}

/* ---------------------------------------------------------
   COMMENTS — FURTHER BELOW THE FOLD
   --------------------------------------------------------- */
#comments {
  width:min(920px,calc(100% - 48px)) !important;
  max-width:920px !important;
  margin:46px auto 80px !important;
  padding:24px !important;
  box-sizing:border-box;
  color:var(--tnx-pic-text);
  background:rgba(255,255,255,.018) !important;
  border:1px solid rgba(223,121,171,.09);
  border-radius:18px;
}

#comments h3 {
  margin:0 0 18px;
  color:#f2ebef;
}

#commentAdd,
#pictureComments {
  max-width:none !important;
}

#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
  color:#f6eff3;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  padding:11px 13px;
}

#comments textarea {
  min-height:130px;
  resize:vertical;
}

#comments input[type="submit"],
#comments button {
  appearance:none;
  border:0;
  border-radius:999px;
  padding:10px 19px;
  color:#fff;
  font-weight:700;
  background:linear-gradient(180deg,#d879a4,#b95986);
  cursor:pointer;
}

/* Mobile: media fills width, information and comments remain vertical. */
@media(max-width:760px) {
  #imageHeaderBar,
  #imageToolBar,
  #theImageAndInfos {
    width:calc(100% - 24px) !important;
  }

  #theImageAndInfos {
    margin-top:10px !important;
  }

  #theImage > video.video-js,
  #theImage > video,
  #theImage video.video-js:not(.vjs-tech),
  #theImage #theMainImage,
  #theImage > img:not(.img-loader-derivatives) {
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    border-radius:10px;
  }

  #theImage .video-container {
    width:100% !important;
    max-width:100% !important;
  }

  #imageInfos {
    width:100% !important;
    margin-top:20px !important;
    padding:18px !important;
  }

  #imageInfos .imageInfo {
    grid-template-columns:1fr;
    gap:4px;
    padding:9px 0;
  }

  #comments {
    width:calc(100% - 24px) !important;
    margin-top:30px !important;
    padding:18px !important;
  }
}


/* Luxe Dark 1.0.27 — viewport-fit media.
   picture-fit.js calculates the real remaining viewport height after the
   native Piwigo toolbars, so portrait media never runs below the screen. */
#theImage {
  --tnx-picture-fit-h: calc(100vh - 130px);
}

#theImage > video.video-js,
#theImage > video,
#theImage video.video-js:not(.vjs-tech) {
  height:var(--tnx-picture-fit-h) !important;
  max-height:var(--tnx-picture-fit-h) !important;
}

#theImage #theMainImage,
#theImage > img:not(.img-loader-derivatives) {
  max-height:var(--tnx-picture-fit-h) !important;
}

/* VideoJS 7 fluid mode gets an explicit JS-calculated width so its responsive
   ratio produces a height that also fits inside the viewport. */
#theImage .video-container {
  max-width:min(92vw,1180px) !important;
}

#theImage .video-container.tnx-fit-player {
  width:var(--tnx-picture-fit-w, min(92vw,980px)) !important;
  max-width:var(--tnx-picture-fit-w, min(92vw,980px)) !important;
}

@media(max-width:760px) {
  #theImage {
    --tnx-picture-fit-h:auto;
  }
}


/* Luxe Dark 1.0.28 — previous/next thumbnails beside the main media.
   Only enabled when picture-fit.js confirms there is enough horizontal room.
   Otherwise the native horizontal strip below the media remains unchanged. */
#theImageAndInfos {
  position:relative !important;
}

#theImageAndInfos.tnx-side-nav #imageInfos .navThumbs {
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  display:block !important;
  overflow:visible !important;
  pointer-events:none;
  z-index:20;
}

#theImageAndInfos.tnx-side-nav #imageInfos .navThumb {
  position:absolute !important;
  top:var(--tnx-nav-y) !important;
  float:none !important;
  width:88px !important;
  height:88px !important;
  margin:0 !important;
  pointer-events:auto;
  border-radius:14px;
  overflow:hidden;
  opacity:.72;
  transform:scale(.96);
  transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.32);
}

#theImageAndInfos.tnx-side-nav #imageInfos #linkPrev {
  left:var(--tnx-prev-x) !important;
  right:auto !important;
}

#theImageAndInfos.tnx-side-nav #imageInfos #linkNext {
  left:var(--tnx-next-x) !important;
  right:auto !important;
}

#theImageAndInfos.tnx-side-nav #imageInfos .navThumb:hover {
  opacity:1;
  transform:scale(1);
  box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 0 1px rgba(223,121,171,.18);
}

#theImageAndInfos.tnx-side-nav #imageInfos .navThumb img,
#theImageAndInfos.tnx-side-nav #imageInfos .thumbHover {
  width:88px !important;
  height:88px !important;
  border-radius:14px !important;
}

/* Once the prev/next controls float beside the media, don't reserve a blank
   strip at the top of the metadata card. */
#theImageAndInfos.tnx-side-nav #imageInfos .navThumbs + .imageInfoTable,
#theImageAndInfos.tnx-side-nav #imageInfos .navThumbs ~ .imageInfoTable {
  margin-top:0 !important;
}

@media(max-width:979px) {
  #theImageAndInfos.tnx-side-nav #imageInfos .navThumbs {
    position:static !important;
    height:auto !important;
    display:flex !important;
    pointer-events:auto;
  }
}


/* Luxe Dark 1.0.29 — keep side thumbnails clean.
   Modus adds large arrow artwork to prev/next thumbnail overlays on hover.
   Luxe Dark uses the thumbnail itself as the navigation affordance, so remove it. */
#imageInfos .prevThumbHover,
#imageInfos .nextThumbHover,
#imageInfos .prevThumbHover:hover,
#imageInfos .nextThumbHover:hover,
html.wide #imageInfos .prevThumbHover,
html.wide #imageInfos .nextThumbHover,
html.wide #imageInfos .prevThumbHover:hover,
html.wide #imageInfos .nextThumbHover:hover {
  background-image:none !important;
  background-color:transparent !important;
  background:none !important;
}


/* Luxe Dark 1.0.30 — visual continuity with the discovery home.
   Keep the media viewer functionality from 1.0.27–1.0.29, but remove the
   remaining Modus/newspaper visual language around it. */

body {
  --tnx-bg:#0a090b;
  --tnx-surface:#121115;
  --tnx-line:#26232a;
  --tnx-text:#ddd3db;
  --tnx-muted:#aaa0a9;
  --tnx-pink:#cf6e97;

  background:var(--tnx-bg) !important;
  color:var(--tnx-text) !important;
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}

/* Remove the conspicuous grey Modus bars and keep a restrained Luxe divider. */
#imageHeaderBar {
  width:min(1320px,calc(100% - 48px)) !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:11px 0 7px !important;
  background:transparent !important;
  border:0 !important;
  color:var(--tnx-muted) !important;
}

#imageHeaderBar .browsePath {
  min-height:0;
  color:var(--tnx-muted) !important;
  font-size:11px !important;
}

#imageHeaderBar .browsePath > :not(.imageNumber),
#imageHeaderBar .browsePath h2 {
  color:var(--tnx-muted) !important;
}

/* The filename/title is often machine-generated and visually noisy.
   Keep navigation context available but de-emphasize it heavily. */
#imageHeaderBar h2 {
  font-size:11px !important;
  font-weight:500 !important;
  opacity:.45;
}

#imageHeaderBar .imageNumber {
  float:right !important;
  font-size:10px !important;
  color:var(--tnx-muted) !important;
  opacity:.8;
}

#imageToolBar {
  width:min(1320px,calc(100% - 48px)) !important;
  min-height:42px !important;
  height:auto !important;
  margin:0 auto 16px !important;
  padding:5px 0 7px !important;
  box-sizing:border-box;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #232227 !important;
}

#imageToolBar .actionButtons,
#imageToolBar .navigationButtons {
  display:flex;
  align-items:center;
  gap:8px;
}

#imageToolBar .pwg-button {
  width:34px !important;
  height:34px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  color:#bdb4bb !important;
  opacity:.8;
  border-radius:6px;
  transition:background-color .15s,color .15s,opacity .15s;
}

#imageToolBar .pwg-button:hover {
  color:#f0dce5 !important;
  opacity:1;
  background:rgba(255,255,255,.025);
}

/* Use the same max content width as the home page. */
#theImageAndInfos,
html.wide #theImageAndInfos {
  width:min(1320px,calc(100% - 48px)) !important;
  max-width:1320px !important;
  margin-top:0 !important;
}

/* Media keeps the current viewport-fit behavior, but remove the heavy
   "standalone viewer" shadow so it feels like the same gallery surface. */
#theImage > video.video-js,
#theImage > video,
#theImage video.video-js:not(.vjs-tech),
#theImage .video-container > .video-js,
#theImage .video-js.vjs-fluid,
#theImage #theMainImage,
#theImage > img:not(.img-loader-derivatives) {
  border-radius:10px !important;
  box-shadow:0 16px 34px rgba(0,0,0,.22) !important;
}

/* Side previous/next thumbs mirror the home cards instead of floating widgets. */
#theImageAndInfos.tnx-side-nav #imageInfos .navThumb {
  border:1px solid var(--tnx-line);
  border-radius:10px !important;
  background:#0d0d10;
  box-shadow:0 12px 26px rgba(0,0,0,.25);
}

#theImageAndInfos.tnx-side-nav #imageInfos .navThumb:hover {
  border-color:#775366;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

#theImageAndInfos.tnx-side-nav #imageInfos .navThumb img,
#theImageAndInfos.tnx-side-nav #imageInfos .thumbHover {
  border-radius:9px !important;
}

/* Metadata no longer looks like a separate pink application panel. */
#imageInfos,
html.wide #imageInfos {
  width:min(980px,100%) !important;
  max-width:980px !important;
  margin:26px auto 0 !important;
  padding:18px 20px 16px !important;
  color:var(--tnx-text) !important;
  background:var(--tnx-surface) !important;
  border:1px solid var(--tnx-line) !important;
  border-radius:10px !important;
  box-shadow:0 16px 34px rgba(0,0,0,.18) !important;
}

/* Remove Modus' black slab inside the metadata card. */
#imageInfos #standard,
#imageInfos #Metadata,
#imageInfos .imageInfoTable {
  background:transparent !important;
}

/* Related thumbnails become a restrained gallery strip. */
#imageInfos .navThumbs,
html.wide #imageInfos .navThumbs {
  margin-bottom:12px !important;
  padding-bottom:14px !important;
  border-bottom:1px solid var(--tnx-line) !important;
}

#imageInfos .navThumb,
html.wide #imageInfos .navThumb {
  border:1px solid var(--tnx-line);
  border-radius:9px;
  background:#0d0d10;
}

/* Metadata is now a compact 2-column Luxe layout on desktop. */
#imageInfos #standard,
#imageInfos #Metadata {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:30px;
  row-gap:0;
  width:100%;
}

#imageInfos .imageInfo {
  display:grid !important;
  grid-template-columns:minmax(90px,120px) minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start;
  padding:10px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.045) !important;
  line-height:1.55;
}

#imageInfos #Categories,
#imageInfos #rating,
#imageInfos #Average {
  grid-column:1 / -1;
}

#imageInfos .imageInfo dt,
html.wide #imageInfos .imageInfo dt {
  color:var(--tnx-muted) !important;
  font-size:12px;
  font-weight:600 !important;
  letter-spacing:.01em;
}

#imageInfos .imageInfo dd,
html.wide #imageInfos .imageInfo dd {
  color:var(--tnx-text) !important;
  font-size:13px;
}

#imageInfos a {
  color:#dda0bb !important;
}
#imageInfos a:hover {
  color:#efb6cd !important;
}

/* Rating stars should sit naturally inside the information area. */
#imageInfos #rating dd,
#imageInfos #Average dd {
  min-height:28px;
}

/* Comments visually belong to the same system, but remain far below the fold. */
#comments {
  width:min(980px,calc(100% - 48px)) !important;
  max-width:980px !important;
  margin:42px auto 80px !important;
  padding:20px !important;
  color:var(--tnx-text) !important;
  background:var(--tnx-surface) !important;
  border:1px solid var(--tnx-line) !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

#comments h3,
#comments h4 {
  color:var(--tnx-text) !important;
}

#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
  color:var(--tnx-text) !important;
  background:#0d0d10 !important;
  border:1px solid var(--tnx-line) !important;
  border-radius:7px !important;
}

#comments input[type="submit"],
#comments button {
  border-radius:6px !important;
  background:#21141b !important;
  border:1px solid #684354 !important;
  color:#e7b3c9 !important;
  box-shadow:none !important;
}

#comments input[type="submit"]:hover,
#comments button:hover {
  background:#2b1821 !important;
  border-color:#8d536d !important;
}

/* Native switches/popovers should not reintroduce bright newspaper surfaces. */
.switchBox,
.ui-dialog,
.ui-widget-content {
  background:#151217 !important;
  color:var(--tnx-text) !important;
  border-color:var(--tnx-line) !important;
}

@media(max-width:760px) {
  #imageHeaderBar,
  #imageToolBar,
  #theImageAndInfos {
    width:calc(100% - 24px) !important;
  }

  #imageInfos,
  #comments {
    width:100% !important;
    max-width:none !important;
  }

  #imageInfos #standard,
  #imageInfos #Metadata {
    grid-template-columns:1fr;
  }

  #imageInfos .imageInfo {
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  #imageInfos #Categories,
  #imageInfos #rating,
  #imageInfos #Average {
    grid-column:auto;
  }
}


/* Luxe Dark 1.0.31 — minimal picture header and flat metadata. */

/* The user only needs Home / Slideshow / Favorite on the detail page. */
#imageHeaderBar {
  display:none !important;
}

#imageToolBar.tnx-toolbar-minimal {
  width:min(1320px,calc(100% - 48px)) !important;
  min-height:52px !important;
  margin:0 auto 14px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid #232227 !important;
}

/* Keep native actions in DOM for plugin compatibility, but remove them visually. */
#imageToolBar.tnx-toolbar-minimal > .actionButtons,
#imageToolBar.tnx-toolbar-minimal > .navigationButtons,
#imageToolBar.tnx-toolbar-minimal > .imageNumber,
#imageToolBar.tnx-toolbar-minimal > #imageActionsSwitch,
#imageToolBar.tnx-toolbar-minimal > .actionButtonsWrapper {
  display:none !important;
}

#imageToolBar .tnx-picture-actions {
  display:flex;
  align-items:center;
  gap:22px;
  min-height:52px;
}

#imageToolBar .tnx-picture-action {
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  padding:4px 0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#bdb4bb !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none !important;
  opacity:.86;
  transition:color .15s,opacity .15s;
}

#imageToolBar .tnx-picture-action:hover {
  color:#efb6cd !important;
  background:transparent !important;
  opacity:1;
}

#imageToolBar .tnx-picture-action-home::before {
  content:"⌂";
  font-size:15px;
  line-height:1;
}

#imageToolBar .tnx-picture-action-slideshow::before {
  content:"▶";
  font-size:10px;
  line-height:1;
}

#imageToolBar .tnx-picture-action-favorite {
  width:30px !important;
  height:30px !important;
  padding:0 !important;
}

#imageToolBar .tnx-picture-action-favorite .pwg-icon {
  margin:0 !important;
}

/* Metadata should feel like part of the page, not a separate card. */
#imageInfos,
html.wide #imageInfos {
  width:min(980px,100%) !important;
  max-width:980px !important;
  margin:28px auto 0 !important;
  padding:0 !important;
  color:var(--tnx-text) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Side-navigation thumbs are already around the media; don't reserve a
   decorative strip above metadata when they are in side-nav mode. */
#theImageAndInfos.tnx-side-nav #imageInfos .navThumbs {
  border:0 !important;
}

/* Flat information: spacing and typography do the grouping, not boxes. */
#imageInfos #standard,
#imageInfos #Metadata,
#imageInfos .imageInfoTable {
  background:transparent !important;
  border:0 !important;
}

#imageInfos #standard,
#imageInfos #Metadata {
  column-gap:44px !important;
}

#imageInfos .imageInfo {
  padding:9px 0 !important;
  border-bottom:0 !important;
}

#imageInfos .imageInfo dt,
html.wide #imageInfos .imageInfo dt {
  color:#8f858d !important;
  font-size:11px !important;
  font-weight:600 !important;
}

#imageInfos .imageInfo dd,
html.wide #imageInfos .imageInfo dd {
  color:#d8cfd6 !important;
  font-size:13px !important;
}

#imageInfos #rating,
#imageInfos #Average {
  padding-top:12px !important;
}

/* Comments stay below and may retain a subtle surface because they are a form,
   but they are deliberately outside the initial viewing experience. */
#comments {
  margin-top:52px !important;
}

@media(max-width:760px) {
  #imageToolBar.tnx-toolbar-minimal {
    width:calc(100% - 24px) !important;
  }

  #imageToolBar .tnx-picture-actions {
    gap:15px;
  }

  #imageToolBar .tnx-picture-action {
    font-size:11px;
  }

  #imageInfos {
    width:100% !important;
    margin-top:22px !important;
  }
}


/* Luxe Dark 1.0.82 — mobile video viewport fit.
   Portrait videos must not grow from the phone width alone. Keep their native
   aspect ratio and let picture-fit.js choose a width/height that leaves room
   for the page controls below the player. Images keep the existing behavior. */
@media(max-width:760px) {
  #theImage > video.video-js,
  #theImage > video,
  #theImage video.video-js:not(.vjs-tech) {
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:72vh !important;
    max-height:min(72svh,720px) !important;
    object-fit:contain !important;
  }

  #theImage .video-container.tnx-fit-player {
    width:min(100%,var(--tnx-picture-fit-w,100%)) !important;
    max-width:min(100%,var(--tnx-picture-fit-w,100%)) !important;
  }
}


/* Luxe Dark 1.0.116 — Video.js 10 RC.2.
   piwigo-videojs still owns the media/source pipeline; Luxe Dark wraps the
   native <video> only after the v10 custom elements are registered. */
#theImage .tnx-vjs10-container {
  width:min(92vw,1180px);
  max-width:min(92vw,1180px);
  margin:0 auto;
  position:relative;
}

#theImage .tnx-vjs10-player {
  display:contents;
}

#theImage .tnx-vjs10-skin {
  display:block;
  width:100%;
  max-width:100%;
  margin:0 auto;
  color-scheme:dark;
  --media-accent-color:#cf6e97;
  --media-accent-text-color:#fff;
  --media-border-color:rgba(255,255,255,.08);
  --media-border-radius:10px;
  --media-font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;
  --media-object-fit:contain;
}

@media(max-width:760px) {
  #theImage .tnx-vjs10-container {
    width:min(100%,var(--tnx-video-fit-w,100%));
    max-width:min(100%,var(--tnx-video-fit-w,100%));
  }
}

/* Luxe Dark 1.0.126 — stable first paint for previous/next thumbnails.
   On desktop, picture-fit.js decides whether the controls fit beside the media.
   Keep them invisible until that calculation is complete, avoiding the brief
   below-media flash before they move left/right. JavaScript-disabled pages
   never receive the html marker, so native thumbnail navigation stays visible. */
@media (min-width:980px) {
  html.tnx-picture-js #theImageAndInfos:not(.tnx-side-nav-ready) #imageInfos .navThumbs {
    visibility:hidden !important;
  }
}