/* DANIEL LUCIAN ITEM GALLERY V91 — BANNER-TONE OVERVIEW + DIRECT HOVER DIMMING TEST
   Test only. V83 toolbar anchoring and arrow zones retained.
   Artificial desktop/tablet stage heights removed.
   The rendered photograph now determines gallery height. Existing Lightbox unchanged.
*/
:root{
  --dl-v82-control-size:32px;
  --dl-v82-control-gap:4px;
  --dl-v82-stage-side:72px;
  --dl-v82-stage-arrow-size:44px;
  --dl-v82-toolbar-inset:14px;
}

[data-dl-overlay-gallery="v82"]{
  min-width:0 !important;
  max-width:100% !important;
  overflow:visible !important;
}

.dl-v82-gallery-shell{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:clamp(7px,1.1svh,15px) 0 clamp(10px,1.45svh,20px);
  padding:0;
  display:block;
  position:relative;
}

/* V80 image stage retained: real left/right arrow zones, stable centre image area. */
[data-dl-overlay-gallery="v82"] .main-image-wrap{
  position:relative !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding-left:var(--dl-v82-stage-side) !important;
  padding-right:var(--dl-v82-stage-side) !important;
  margin:0 !important;
}

[data-dl-overlay-gallery="v82"] #mainImage.main-image{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:min(72svh, 760px) !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

[data-dl-overlay-gallery="v82"] .thumb-strip-wrap{
  display:none !important;
}

[data-dl-overlay-gallery="v82"] .dl-v82-stage-arrow{
  display:flex !important;
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:var(--dl-v82-stage-arrow-size) !important;
  height:var(--dl-v82-stage-arrow-size) !important;
  min-width:var(--dl-v82-stage-arrow-size) !important;
  min-height:var(--dl-v82-stage-arrow-size) !important;
  margin:0 !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:6 !important;
}
[data-dl-overlay-gallery="v82"] .dl-v82-stage-prev{
  left:calc((var(--dl-v82-stage-side) - var(--dl-v82-stage-arrow-size)) / 2) !important;
  right:auto !important;
}
[data-dl-overlay-gallery="v82"] .dl-v82-stage-next{
  right:calc((var(--dl-v82-stage-side) - var(--dl-v82-stage-arrow-size)) / 2) !important;
  left:auto !important;
}

/* Compact toolbar floats inside the image stage. It contributes no page height. */
.dl-v82-controls{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--dl-v82-control-gap);
  width:auto;
  max-width:calc(100% - (2 * var(--dl-v82-stage-side)));
  min-height:38px;
  margin:0;
  padding:3px 6px;
  position:absolute;
  left:50%;
  top:50%;
  bottom:auto;
  transform:translateX(-50%);
  z-index:9;
  background:rgba(10,9,7,.50);
  border:1px solid rgba(229,212,154,.12);
  border-radius:4px;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

.dl-v82-control{
  appearance:none;
  -webkit-appearance:none;
  width:var(--dl-v82-control-size);
  height:var(--dl-v82-control-size);
  min-width:var(--dl-v82-control-size);
  min-height:var(--dl-v82-control-size);
  border:0;
  background:transparent;
  color:#d9cfaa;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font:inherit;
  font-size:23px;
  line-height:1;
  opacity:.88;
}
.dl-v82-control:hover{opacity:1;}
.dl-v82-control:disabled{opacity:.28;cursor:default;}
.dl-v82-control svg{
  display:block;
  width:19px;
  height:19px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.dl-v82-control-prev svg,
.dl-v82-control-next svg,
.dl-v82-control-grid svg,
.dl-v82-control-expand svg{width:18px;height:18px;}
.dl-v82-control-grid svg{stroke-width:2;}
.dl-v82-control-prev svg,
.dl-v82-control-next svg{stroke-width:2;}

/* Overview remains inside the image stage. Toolbar stays available above it. */
.dl-v82-overview{
  position:absolute;
  inset:0;
  z-index:7;
  box-sizing:border-box;
  display:none;
  overflow:auto;
  padding:28px var(--dl-v82-stage-side) max(86px, calc(66px + env(safe-area-inset-bottom)));
  background:rgba(10,9,6,.78);
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.dl-v82-overview::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.dl-v82-overview.is-open{display:block;}
.dl-v82-overview-grid{
  width:100%;
  height:auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  align-content:center;
  justify-content:center;
  min-height:100%;
}
.dl-v82-overview-thumb{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  min-width:0;
  cursor:pointer;
}
.dl-v82-overview-thumb img{
  display:block;
  width:100%;
  height:auto;
  max-height:142px;
  object-fit:contain;
  margin:0 auto;
  filter:none;
  transition:filter 220ms ease;
}
/* The overview lives inside .main-image-wrap. Neutralise the site-wide
   parent hover so overview thumbnails remain full strength at rest. */
.main-image-wrap:hover .dl-v82-overview-thumb img{
  filter:none;
}
/* Then apply the established 16% photographic darkening only to the
   individual hovered/current/focused overview thumbnail. */
.main-image-wrap:hover .dl-v82-overview-thumb:hover img,
.main-image-wrap:hover .dl-v82-overview-thumb.is-current img,
.dl-v82-overview-thumb.is-current img{
  filter:brightness(.84);
}
.dl-v82-overview-thumb:focus-visible{
  outline:none;
}
.main-image-wrap:hover .dl-v82-overview-thumb:focus-visible img,
.dl-v82-overview-thumb:focus-visible img{
  filter:brightness(.84);
}

@media (max-width:1050px){
  .dl-v82-gallery-shell{
    margin:clamp(4px,.65svh,8px) 0 clamp(6px,.9svh,10px);
  }
  :root{
    --dl-v82-stage-side:62px;
    --dl-v82-stage-arrow-size:42px;
    --dl-v82-toolbar-inset:12px;
  }
  [data-dl-overlay-gallery="v82"] #mainImage.main-image{
    max-height:min(68svh, 680px) !important;
  }
  .dl-v82-overview{padding:20px var(--dl-v82-stage-side) max(82px, calc(62px + env(safe-area-inset-bottom)));}
  .dl-v82-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
}

@media (max-width:700px){
  :root{
    --dl-v82-control-size:29px;
    --dl-v82-control-gap:3px;
    --dl-v82-stage-side:48px;
    --dl-v82-stage-arrow-size:38px;
    --dl-v82-toolbar-inset:10px;
  }
  .dl-v82-gallery-shell{
    margin:clamp(2px,.45svh,6px) 0 clamp(4px,.7svh,8px);
  }
  [data-dl-overlay-gallery="v82"] .main-image-wrap{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    padding-left:var(--dl-v82-stage-side) !important;
    padding-right:var(--dl-v82-stage-side) !important;
  }
  [data-dl-overlay-gallery="v82"] #mainImage.main-image{
    max-width:100% !important;
    max-height:68svh !important;
  }
  .dl-v82-controls{
    min-height:34px;
    padding:2px 5px;
    max-width:calc(100% - 18px);
  }
  .dl-v82-control{font-size:21px;}
  .dl-v82-control svg,
  .dl-v82-control-prev svg,
  .dl-v82-control-next svg,
  .dl-v82-control-grid svg,
  .dl-v82-control-expand svg{width:16px;height:16px;}
  .dl-v82-overview{padding:12px var(--dl-v82-stage-side) max(78px, calc(58px + env(safe-area-inset-bottom)));}
  .dl-v82-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;}
  .dl-v82-overview-thumb img{max-height:none;}
}

/* =========================================================
   V110 TEST — SHORT-LANDSCAPE NATURAL IMAGE HEIGHT
   Consolidates the approved V97–V108 mobile refinements without
   changing their final rendered values or behaviour.
   ========================================================= */

/* Mobile portrait: reclaim the space formerly reserved for removed
   normal-page side arrows. The photograph renders at ~92vw. */
@media (orientation:portrait) and (max-width:700px){
  [data-dl-overlay-gallery="v82"] .main-image-wrap{
    width:100% !important;
    max-width:100% !important;
    padding-left:4vw !important;
    padding-right:4vw !important;
  }

  [data-dl-overlay-gallery="v82"] #mainImage.main-image{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:68svh !important;
  }
}

/* Short mobile landscape: approved large-image composition, fixed
   site glow, four-column scrollable overview and final spacing. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){
  html{
    background:#0f0b07 !important;
  }

  body{
    background:transparent !important;
    min-height:100%;
  }

  html::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(
        ellipse 48% 105% at 50% 18%,
        rgba(107,105,97,.96) 0%,
        rgba(82,79,73,.88) 20%,
        rgba(48,44,39,.72) 46%,
        rgba(24,19,14,.48) 66%,
        rgba(15,11,7,0) 82%
      );
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% 760px;
  }

  main{
    transform:translateY(-22px);
  }

  .dl-v82-gallery-shell{
    margin-top:clamp(4px,1.2svh,8px) !important;
    margin-bottom:clamp(6px,1.6svh,12px) !important;
    transform:translateY(-18px);
  }

  [data-dl-overlay-gallery="v82"] .main-image-wrap{
    width:100% !important;
    max-width:100% !important;
    padding-left:3vw !important;
    padding-right:3vw !important;
  }

  [data-dl-overlay-gallery="v82"] #mainImage.main-image{
    width:auto !important;
    height:auto !important;
    max-height:min(82svh,430px) !important;
    max-width:94vw !important;
    object-fit:contain !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  [data-dl-overlay-gallery="v82"] .main-image-wrap.dl-v97-overview-open{
    min-height:min(72svh,292px) !important;
    background:#0a0906 !important;
  }

  [data-dl-overlay-gallery="v82"] .main-image-wrap.dl-v97-overview-open .dl-v82-overview{
    inset:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior-y:contain;
    padding:
      14px
      max(18px,env(safe-area-inset-left))
      max(78px,calc(58px + env(safe-area-inset-bottom)))
      max(18px,env(safe-area-inset-right)) !important;
    background:rgba(10,9,6,.78) !important;
  }

  [data-dl-overlay-gallery="v82"] .main-image-wrap.dl-v97-overview-open .dl-v82-overview-grid{
    min-height:0 !important;
    align-content:start !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  [data-dl-overlay-gallery="v82"] .main-image-wrap.dl-v97-overview-open .dl-v82-overview-thumb img{
    max-height:112px;
  }
}


/* =========================================================
   V112 — LIGHTBOX FIXED VIEWPORT ARROWS
   Approved 22 August 2026.
   Keep previous/next controls fixed to the visual viewport,
   independent of displayed image dimensions.
   ========================================================= */
#dl-lightbox .dl-lightbox-nav{
  position:fixed !important;
  top:50vh !important;
  top:50dvh !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}

#dl-lightbox .dl-lightbox-prev{
  left:0 !important;
  right:auto !important;
}

#dl-lightbox .dl-lightbox-next{
  right:0 !important;
  left:auto !important;
}


/* =========================================================
   V109 — EXACT LIBRARY SHORT MOBILE LANDSCAPE TYPOGRAPHY

   Exact proven Library mechanism.
   Only selector substitution:
   .library-article-main -> .item-page
   ========================================================= */

@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){

  .item-page,
  .item-page *{
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  .description p{
    font-size:12px !important;
  }
}


/* =========================================================
   V109 — MOBILE PORTRAIT HERO → PRICE SPACING

   Adds 8px breathing room between the completed gallery
   and purchase information in mobile portrait only.

   Established mobile value: 30px
   Portrait refinement:      38px

   Landscape remains unchanged.
   ========================================================= */

@media (orientation:portrait) and (max-width:719px){

  .purchase-block{
    margin-top:38px !important;
  }

}