/* ============================================================================
   TX-GALLERY-V2 - Phase B prototype. Loaded ONLY on ?gal=v2 pages.
   CASCADE: forest.css WRESERVE(>=768: img 380x380!important) + IMG-550(>=992:
   img 550x550!important) hit any img in the column at (0,2,1)!important.
   Every img rule below uses html body... !important and loads AFTER forest.css.
   GEOMETRY PARITY (16/08 round 3, CDP-measured vs MagicZoom @1348+@1920):
   >=992 main frame = 480x480 FIXED (old a.MagicZoom: width 480, min-width 480,
   pad 14 => img 452~450) centered in the column; strip 96.
   768-991 pinned 380 by WRESERVE; <=767 square capped 46vh (TX-PDP-1612).
   RTL (16/08): prev sits RIGHT, next sits LEFT; arrows are inline SVG (bidi-
   proof).
   ROUND 4 (16/08 night, per Roi's video review): strip gap 27->10 (thumbs sat
   too far from the frame; the old 603px column parity with MagicZoom is
   dropped by request - column is now 480+10+96=586, CLS still 0 because all
   geometry stays fixed pre-load); arrows hover-revealed on fine pointers
   (touch tablets keep them always visible); thumb hover border tint.
   ROUND 5 (16/08 night, Roi): wrap everywhere - arrows never disable, so the
   round-3 :disabled styling (edge arrow dimmed) is gone with the js guards.
   ROUND 6 (17/08, Roi): lightbox caption - current slide's alt rendered above
   the thumb strip (js feeds it, css places it); paddingFn in js raised to
   112/120 bottom so image never sits under strip+caption.
   ROUND 7 (17/08): strip scroll is a scrollLeft ASSIGNMENT (Prototype 1.7
   hijacks Element#scrollTo -> window.scrollTo -> page jump); the strip gets
   scroll-behavior:smooth so the assignment still glides.
   ========================================================================== */

html body.catalog-product-view .txgv2-root{
  position:relative; width:100%; margin:0 auto; direction:rtl; text-align:center;
}
html body.catalog-product-view .txgv2-main{
  display:block; width:100%;
  aspect-ratio:1/1;                    /* CLS 0: geometry known from first byte */
  box-sizing:border-box; padding:14px;
  background:#f8f9fa; border-radius:12px;
  box-shadow:0 1px 4px rgba(15,30,20,.06);
  cursor:zoom-in;
  touch-action:pan-y pinch-zoom;       /* CRITICAL: vertical drag scrolls the PAGE */
  -webkit-tap-highlight-color:transparent;
}
html body.catalog-product-view .txgv2-main img.txgv2-img{
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; display:block; border-radius:8px; margin:0 auto;
}
@media (min-width:992px){
  /* mirror old MagicZoom frame exactly: 480x480, centered (was column-wide) */
  html body.catalog-product-view .txgv2-main{
    width:480px; min-width:480px; max-width:100%; margin:0 auto;
  }
}
@media (min-width:768px) and (max-width:991px){
  html body.catalog-product-view .txgv2-root{ max-width:380px; }
}
@media (max-width:767px){
  html body.catalog-product-view .txgv2-main{ max-height:46vh; }
}
html body.catalog-product-view .txgv2-thumbs{
  display:flex; flex-wrap:nowrap; align-items:center; direction:rtl;
  height:92px; gap:8px; margin-top:10px;
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth;              /* round 7: smooths the scrollLeft assignment */
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
html body.catalog-product-view .txgv2-thumbs::-webkit-scrollbar{ display:none; height:0; }
html body.catalog-product-view .txgv2-thumb{
  flex:0 0 80px; width:80px; height:80px; aspect-ratio:1/1;
  box-sizing:border-box; margin:0; padding:3px;
  border:2px solid #E6E2D8; border-radius:10px;
  background:#fff; overflow:hidden; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
html body.catalog-product-view .txgv2-thumb.is-active{
  border-color:#003D29; box-shadow:0 0 0 2px rgba(0,61,41,.18);
}
html body.catalog-product-view .txgv2-thumb img{
  width:100% !important; height:100% !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; display:block;
}
html body.catalog-product-view .txgv2-nav{ display:none; }
@media (min-width:768px){
  html body.catalog-product-view .txgv2-nav{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:calc((100% - 102px) / 2); transform:translateY(-50%);
    width:38px; height:38px; padding:0; border:0; border-radius:50%;
    background:rgba(255,255,255,.92); color:#003D29;
    box-shadow:0 1px 6px rgba(15,30,20,.18);
    line-height:1; cursor:pointer; z-index:5;
  }
  html body.catalog-product-view .txgv2-nav:hover{ background:#003D29; color:#fff; }
  /* RTL: prev sits RIGHT, next sits LEFT */
  html body.catalog-product-view .txgv2-prev{ right:18px; left:auto; }
  html body.catalog-product-view .txgv2-next{ left:18px;  right:auto; }
}
@media (min-width:992px){
  /* strip 96 + gap 10 (round 4: was 27 - thumbs sat too far from the frame;
     old-603 MagicZoom parity dropped by request). MUST live after the base
     .txgv2-thumbs rules - same specificity, cascade order decides.
     column total 480+10+96 = 586px, geometry still fixed pre-load => CLS 0 */
  html body.catalog-product-view .txgv2-thumbs{ height:96px; margin-top:10px; }
  /* strip block is 96+10=106 high => keep arrows centered on the 480 frame */
  html body.catalog-product-view .txgv2-nav{ top:calc((100% - 106px) / 2); }
}
.pswp .txgv2-lb-thumbs{
  direction:rtl;
  position:absolute; left:0; right:0; bottom:0;
  display:flex; gap:6px; align-items:center; justify-content:safe center;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  overflow-x:auto;
  background:linear-gradient(transparent, rgba(0,0,0,.55));
  scrollbar-width:none;
}
.pswp .txgv2-lb-thumbs::-webkit-scrollbar{ display:none; }
.pswp .txgv2-lb-thumb{
  flex:0 0 52px; width:52px; height:52px; box-sizing:border-box; padding:2px;
  border:2px solid transparent; border-radius:8px;
  background:rgba(255,255,255,.12); cursor:pointer;
}
.pswp .txgv2-lb-thumb img{
  width:100%; height:100%; object-fit:cover; border-radius:6px; display:block;
}
.pswp .txgv2-lb-thumb.is-active{ border-color:#F1D651; }
/* round 6: caption = the slide's alt. Sits above the 68px strip block,
   max 2 lines, never intercepts gestures (pointer-events:none) */
.pswp .txgv2-lb-caption{
  position:absolute; left:8px; right:8px;
  bottom:calc(74px + env(safe-area-inset-bottom, 0px));
  direction:rtl; text-align:center;
  font-size:14px; line-height:1.35; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  max-height:2.7em; overflow:hidden;
  pointer-events:none; z-index:6;
}
/* --------------------------------------------------------------------------
   Bug-5 (16/08 round 3): lightbox close button. Page dir=rtl flips the pswp
   top-bar, so close lands top-LEFT (Roi's preferred corner) - keep it there
   but clear of system UI: safe-area offset, 48px round target, contrast disc.
   pswp icons are abs-positioned for the stock 50x60 button => re-center. */
.pswp__top-bar{
  top:max(6px, env(safe-area-inset-top, 0px)) !important;
  padding-left:max(6px, env(safe-area-inset-left, 0px));
  padding-right:max(6px, env(safe-area-inset-right, 0px));
}
.pswp__button--close{
  width:48px !important; height:48px !important;
  margin:6px 4px !important;
  border-radius:50%;
  background:rgba(15,15,15,.45) !important;
  display:flex; align-items:center; justify-content:center;
}
.pswp__button--close .pswp__icn{
  position:static; margin:0; width:30px; height:30px;
}
/* stock counter counts the reversed pswp order - replaced by .txgv2-lb-counter
   (registered in js with the LOGICAL index) */
.pswp .pswp__counter{ display:none; }
.pswp .txgv2-lb-counter{
  direction:ltr; align-self:center;
  height:30px; line-height:30px; margin:0 10px; padding:0 4px;
  font-size:15px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
/* --------------------------------------------------------------------------
   ROUND 4 (16/08 night)
   (D) Arrows hover-revealed - fine pointers only. Touch tablets (768-991,
   hover:none) keep them always visible; :focus-within keeps keyboard access.
   ROUND 5: no :disabled branch anymore - arrows wrap, never disable. */
@media (min-width:768px) and (hover:hover) and (pointer:fine){
  html body.catalog-product-view .txgv2-nav{
    opacity:0; pointer-events:none; transition:opacity .18s;
  }
  html body.catalog-product-view .txgv2-root:hover .txgv2-nav,
  html body.catalog-product-view .txgv2-root:focus-within .txgv2-nav{
    opacity:1; pointer-events:auto;
  }
}
/* (C) thumb hover: frame tint only, no size change (CLS-safe) */
@media (hover:hover) and (pointer:fine){
  html body.catalog-product-view .txgv2-thumb{ transition:border-color .15s; }
  html body.catalog-product-view .txgv2-thumb:hover{ border-color:#003D29; }
}