/* === FG — GLightbox (global) v1.5 — overlay, captions, loupe ================= */

/* 1) Overlay + caption palette: dark gray everywhere */
.glightbox-container .goverlay{ background:#333333 !important; }
.glightbox-open .glightbox-container .gdesc,
.glightbox-open .glightbox-container .gslide-description{
  background:#333333 !important;
  color:#ffffff !important;
  border:none !important; box-shadow:none !important;
}

/* 2) Caption typography + no jitter */
.glightbox-container .gdesc,
.glightbox-container .gslide-description,
.glightbox-container .gslide-title{
  animation:none !important; transition:none !important;
  opacity:1 !important; visibility:visible !important; transform:none !important;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
}
.glightbox-open .gslide-title{ color:#fff !important; font-weight:700 !important; margin:0 0 .25rem !important; }

/* 3) Mobile portrait: put arrows at the edges, not over the caption */
@media (max-width:820px) and (orientation:portrait){
  .glightbox-container .gprev,
  .glightbox-container .gnext{
    display:block !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    top:50% !important; transform:translateY(-50%) !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    z-index:2147483630 !important;
  }
  .glightbox-container .gprev{ left:max(12px, env(safe-area-inset-left)) !important; }
  .glightbox-container .gnext{ right:max(12px, env(safe-area-inset-right)) !important; }
}

/* 4) Collection page ONLY (page-id 10670): never truncate the caption */
body.page-id-10670 .glightbox-open .gslide-description .gdesc-inner{
  max-height:none !important;
}
body.page-id-10670 .glightbox-open .gslide-description{
  overflow:visible !important; height:auto !important; -webkit-line-clamp:unset !important;
  max-width:700px !important; margin:0 auto !important; padding:14px 18px !important;
}
/* Hide any “more” toggles just in case some init still provides one */
body.page-id-10670 .glightbox-open .gslide-description [aria-label="more"],
body.page-id-10670 .glightbox-open .gslide-description [data-action="more"],
body.page-id-10670 .glightbox-open .gdesc-more{ display:none !important; }

/* 5) Collection thumbs: match the Lightbox loupe (no dark box) */
.fg-collection-scope a.glightbox{ position:relative !important; display:block; line-height:0; overflow:visible !important; }
.fg-collection-scope a.glightbox::after{
  content:""; position:absolute; right:10px; bottom:10px; width:26px; height:26px;
  background-repeat:no-repeat; background-position:center; background-size:26px 26px;
  /* no chip */
  background-color:transparent !important; border:0 !important; box-shadow:none !important;
  /* crisp white loupe with a gentle shadow so it works on light/dark images */
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); opacity:.9; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' \
         stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
      <circle cx='11' cy='11' r='7'/>\
      <line x1='21' y1='21' x2='16.65' y2='16.65'/>\
    </svg>");
}
.fg-collection-scope a.glightbox:hover::after{ opacity:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)); }

/* 6) Keep GLB core controls visible */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev{ opacity:1 !important; visibility:visible !important; }

/* ============================================================================ */
/* === FG — GLightbox (product fixes) v1.1 =============================== */

/* 0) No shadow on the caption panel */
.glightbox-open .glightbox-container .gdesc,
.glightbox-open .glightbox-container .gslide-description{
  border: none !important;
  box-shadow: none !important;
  background: #333333 !important;
  color: #ffffff !important;
}

/* 1) Title & caption spacing; no overlap */
.glightbox-container .gslide-title{ display:block !important; margin:0 0 .35rem !important; font-weight:700 !important; }
.glightbox-container .gslide-description{ padding:12px 14px 14px !important; }
.glightbox-container .gdesc-inner > *{ margin:.35rem 0 !important; }
.glightbox-container .gdesc-inner{ max-height:none !important; }

/* 2) Never crop, never upscale; cap at 1000px wide */
.glightbox-container .gslide-image img{
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
  max-width: min(1000px, 100vw) !important;
  max-height: calc(100vh - 200px) !important; /* room for caption & controls */
}

/* 3) Arrows & close: always visible; kept off the image edge */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev{ opacity:1 !important; visibility:visible !important; }
@media (orientation: landscape){
  .glightbox-container .gprev { left: max(12px, env(safe-area-inset-left)) !important; }
  .glightbox-container .gnext { right: max(12px, env(safe-area-inset-right)) !important; }
}
@media (max-width:820px) and (orientation: portrait){
  .glightbox-container .gprev,
  .glightbox-container .gnext{
    top:50% !important; transform:translateY(-50%) !important;
    pointer-events:auto !important; z-index:999999 !important;
  }
  .glightbox-container .gprev { left: max(12px, env(safe-area-inset-left)) !important; }
  .glightbox-container .gnext { right: max(12px, env(safe-area-inset-right)) !important; }
}

/* 4) Stack Share + Visit chips on phones */
@media (max-width:820px) and (orientation: portrait){
  .glightbox-container .fg-share-btn{ top: calc(env(safe-area-inset-top) + 10px) !important; left: max(10px, env(safe-area-inset-left)) !important; }
  .glightbox-container .fg-visit, .glightbox-container .fg-visit-chip{ top: calc(env(safe-area-inset-top) + 52px) !important; left: max(10px, env(safe-area-inset-left)) !important; }
}
@media (orientation: landscape){
  .glightbox-container .fg-share-btn{ top: 10px !important; left: 10px !important; }
  .glightbox-container .fg-visit, .glightbox-container .fg-visit-chip{ top: 10px !important; left: 96px !important; }
}

/* 5) Magnifier badge on the product image (no shadow; doesn’t steal clicks) */
body.single-product .woocommerce-product-gallery__image a.fg-has-mag{ position:relative; display:inline-block; }
body.single-product .woocommerce-product-gallery__image a.fg-has-mag::after{
  content:""; position:absolute; right:12px; bottom:12px; width:28px; height:28px; border-radius:9999px;
  background:rgba(17,17,17,.85); box-shadow:none !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:16px 16px; opacity:.95; pointer-events:none;
}
/* GLightbox: extra breathing room for captions on small screens */
.glightbox-container .gdesc-inner{
  /* default padding plus safe-area so iOS toolbars don't cover text */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
@media (max-width: 540px){
  .glightbox-container .gdesc-inner{
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  /* keep arrows & controls above the iOS bar */
  .glightbox-container .gprev,
  .glightbox-container .gnext,
  .glightbox-container .gcontrols{
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}
/* === GLightbox polish === */

/* Solid overlay color */
body.glightbox-open .goverlay {
  background: #333333 !important;
  opacity: 1 !important;
}

/* Hide the big title row; we only want the description/caption */
body.glightbox-open .gslide-title { display: none !important; }

/* Never force uppercase */
body.glightbox-open .gslide-description {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

/* Image sizing: as large as possible up to 1000px; no cropping/upscaling */
body.glightbox-open .gslide-image img {
  width: auto !important;
  height: auto !important;
  max-width: 96vw !important;                  /* fallback */
  max-width: min(1000px, 96vw) !important;     /* modern browsers */
  max-height: calc(96vh - 48px) !important;    /* leave space for X/controls */
  object-fit: contain !important;
}

/* Arrows: visible but unobtrusive */
body.glightbox-open .gbtn { background: transparent !important; box-shadow: none !important; }
body.glightbox-open .gnext, 
body.glightbox-open .gprev { width: 44px !important; height: 44px !important; }
body.glightbox-open .gbtn svg { opacity: .9; }
body.glightbox-open .gbtn:hover svg { opacity: 1; }

/* Keep the close button legible against the darker background */
body.glightbox-open .gclose svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }

/* Landscape = “image-only” mode (keep arrows + close; hide text/counter/etc.) */
@media (orientation: landscape) {
  body.glightbox-open .gdesc,
  body.glightbox-open .gslide-description,
  body.glightbox-open .gslide-title,
  body.glightbox-open .gcounter { display: none !important; }
}

/* Remove orange background around any Share button while GLB is open (covers common share plugins) */
body.glightbox-open .a2a_floating_style .a2a_dd,
body.glightbox-open .sharethis-inline-share-buttons .st-btn,
body.glightbox-open .heateor_sss_sharing_container .heateor_sss_more, .glightbox-container .fg-share-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}