/* V43 — MOBILE-ONLY SIMPLIFIED NORMAL ITEM-PAGE GALLERY
   Desktop/tablet V40 remains untouched.
   Lightbox JS remains untouched.

   On phone widths:
   - remove desktop paging arrows from the NORMAL page
   - use a simple native horizontally scrollable thumbnail strip
   - fixed thumbnail height, natural width
   - no calculated slots
   - no responsive paging JS authority
   - keep main image stable and avoid vertical reflow
*/

@media (max-width: 700px) {
  .gallery {
    display:block !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .main-image-wrap {
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
  }

  #mainImage.main-image {
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:52vh !important;
    margin:0 auto !important;
    object-fit:contain !important;
  }

  .thumb-strip-wrap {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:12px 0 0 !important;
    padding:0 !important;
  }

  .thumb-scroll {
    display:none !important;
  }

  #thumbRow {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
    justify-content:flex-start !important;
    padding:0 2px 6px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    scrollbar-width:none !important;
  }

  #thumbRow::-webkit-scrollbar {
    display:none !important;
  }

  #thumbRow .thumb,
  #thumbRow .thumb.dl-fixed-slot-hidden {
    display:block !important;
    flex:0 0 auto !important;
    width:auto !important;
    height:78px !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    scroll-snap-align:start !important;
  }

  #thumbRow .thumb img {
    display:block !important;
    width:auto !important;
    height:78px !important;
    max-width:none !important;
    object-fit:contain !important;
  }

  #thumbRow .thumb.active img,
  #thumbRow .thumb.is-active img,
  #thumbRow .thumb[aria-current="true"] img {
    outline:none !important;
    box-shadow:none !important;
    filter:brightness(0.58) !important;
  }

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

@media (max-width: 390px) {
  #mainImage.main-image {
    max-height:48vh !important;
  }

  #thumbRow .thumb,
  #thumbRow .thumb img {
    height:72px !important;
  }
}


/* V44 — PHONE LANDSCAPE
   iPhone landscape can be wider than 700 CSS px, so the portrait mobile rules
   above may no longer match. Detect a touch/coarse-pointer landscape viewport
   separately and keep the V43 mobile composition there too. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .gallery {
    display:block !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .main-image-wrap {
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
  }

  #mainImage.main-image {
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:58svh !important;
    margin:0 auto !important;
    object-fit:contain !important;
  }

  .thumb-strip-wrap {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:8px 0 0 !important;
    padding:0 !important;
  }

  .thumb-scroll {
    display:none !important;
  }

  #thumbRow {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    width:min(690px, 78vw) !important;
    max-width:min(690px, 78vw) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
    justify-content:flex-start !important;
    padding:0 2px 4px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
    scrollbar-width:none !important;
  }

  #thumbRow::-webkit-scrollbar {
    display:none !important;
  }

  #thumbRow .thumb,
  #thumbRow .thumb.dl-fixed-slot-hidden {
    display:block !important;
    flex:0 0 auto !important;
    width:auto !important;
    height:82px !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    scroll-snap-align:start !important;
  }

  #thumbRow .thumb img {
    display:block !important;
    width:auto !important;
    height:82px !important;
    max-width:none !important;
    object-fit:contain !important;
  }

  #thumbRow .thumb.active img,
  #thumbRow .thumb.is-active img,
  #thumbRow .thumb[aria-current="true"] img {
    outline:none !important;
    box-shadow:none !important;
    filter:brightness(0.58) !important;
  }

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


/* V53 — EXACT LOCKED LIBRARY MASTER PHOTOGRAPHIC EDGE
   Source: uploaded daniel_lucian_library_master_CLEAN_LOCKED_DEFINITIVE_SAFE_CLEAN(1).zip
   Exact border and box-shadow values copied from styles.css. */

#mainImage.main-image,
#thumbRow .thumb img,
.dl-lightbox-image,
.dl-lightbox-thumb img {
  border: .5px solid rgba(0,0,0,.92) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.46),0 0 2px rgba(0,0,0,.72) !important;
  box-sizing: border-box !important;
}


/* V55 — NORMAL-PAGE MAIN IMAGE / ARROW BREATHING ROOM
   Desktop/tablet only.
   The main photograph may no longer consume the final 56px at each side of
   the normal-page image stage. This affects only unusually wide photographs
   that would otherwise run right up to the navigation arrows.

   Portrait/narrower photographs keep their natural size.
   Phone portrait/landscape and the Lightbox are untouched. */
@media (min-width: 701px) and (min-height: 521px) {
  #mainImage.main-image {
    max-width: calc(100% - 112px) !important;
  }
}