/* ================================
   ZCRAVE — PRODUCT GALLERY (FINAL)
   - Desktop grid (1–2–1 first 6, then 2–1–1–2 repeating)
   - Desktop lightbox (vertical)
   - Mobile lightbox (logo-only header + swipe carousel)
   - Updated 2025-08-23
   ================================ */

/* ===== Cursors (desktop only) ===== */
:root{
  --zgg-plus-cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='26' fill='%23ffffff' fill-opacity='.5'/%3E%3Cline x1='26' y1='10' x2='26' y2='42' stroke='%23000' stroke-width='1'/%3E%3Cline x1='10' y1='26' x2='42' y2='26' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 26 26, pointer;
  --zgg-minus-cursor:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='26' fill='%23ffffff' fill-opacity='.5'/%3E%3Cline x1='10' y1='26' x2='42' y2='26' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 26 26, pointer;
}

/* --------------------------------
   DESKTOP GRID
   -------------------------------- */
@media (min-width:1024px){
  body.single-product .zgg-squash{padding-left:0!important;padding-top:0!important;padding-right:0!important;margin-left:0!important;margin-top:0!important;}
  body.single-product .product-gallery-inner{padding:0!important;margin:0!important;}
  body.single-product .woocommerce-product-gallery.images[data-zgg="1"]{padding:0!important;margin:0!important;border:0!important;}
  body.single-product .woocommerce-product-gallery.images[data-zgg="1"] figure,
  body.single-product .woocommerce-product-gallery.images[data-zgg="1"] .woocommerce-product-gallery__wrapper,
  body.single-product .woocommerce-product-gallery.images[data-zgg="1"] .woocommerce-product-gallery__image{margin:0!important;padding:0!important;border:0!important;}
  body.single-product .woocommerce-product-gallery.images[data-zgg="1"] .woocommerce-product-gallery__wrapper,
  body.single-product .woocommerce-product-gallery.images[data-zgg="1"] .flex-viewport,
  body.single-product .woocommerce-product-gallery.images[data-zgg="1"] .flex-control-nav,
  body.single-product .woocommerce-product-gallery.images[data-zgg="1"] .zcrave-progress{display:none!important;}

  /* main grid */
  body.single-product .zcrave-gallery-grid{
    display:grid;grid-auto-rows:auto;gap:1px;padding-top:1px;padding-left:1px;margin:0;box-sizing:border-box;
  }

  /* row types */
  body.single-product .zgg-row-big{display:block;}
  body.single-product .zgg-row-smalls{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;}

  /* tiles */
  body.single-product .zgg-item{margin:0;cursor:var(--zgg-plus-cursor);}
  body.single-product .zgg-item *{cursor:var(--zgg-plus-cursor);}
  body.single-product .zgg-item a,
  body.single-product .zgg-item picture,
  body.single-product .zgg-item img{display:block;width:100%;height:auto;}
  body.single-product .zgg-item img{object-fit:cover;border:0;transition:none!important;}
  body.single-product .zgg-item:hover img{transform:none!important;filter:none!important;}

  /* extra area (2–1–1–2 repeating) */
  body.single-product .zcrave-gallery-more{display:none;grid-auto-rows:auto;gap:1px;}
  body.single-product .zcrave-gallery-more.is-open{display:grid;}
  body.single-product .zcrave-gallery-more > .zgg-row-smalls{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;}
  body.single-product .zcrave-gallery-more > .zgg-row-big{display:block;}

  /* toggle button */
  body.single-product .zcrave-gallery-toggle-wrap{display:flex;justify-content:center;margin-top:0;border-bottom:0.5px solid #000;border-top:0.5px solid #000;}
  body.single-product .zcrave-gallery-toggle{
    appearance:none;background:transparent;border:0;padding:15px 10px;font:inherit;line-height:1;
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-transform:uppercase;color:#000;font-weight:200;
  }
  body.single-product .zcrave-gallery-toggle:hover{font-weight:400;}
  body.single-product .zcrave-gallery-toggle .label{order:1;}
  body.single-product .zcrave-gallery-toggle .chev{order:2;display:inline-block;width:14px;height:14px;color:#000;}
}

/* Mobile keeps Woo slider; our mobile lightbox opens on tap. */
@media (max-width:1023px){
  body.single-product .zcrave-gallery-grid{display:none!important;}
}

/* =========================================================
   ZCRAVE LIGHTBOX — DESKTOP (vertical scroll)
   ========================================================= */
html.zgg-lock-scroll,body.zgg-lock-scroll{overflow:hidden!important;}

.ui-modal.ui-modal--full.product-view__gallery--full-screen.zgg-zcrave-modal{
  position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#fff;z-index:999999;
  display:none;opacity:0;animation-duration:.35s;animation-timing-function:cubic-bezier(.005,.99,.13,1.045);
  animation-fill-mode:forwards;box-sizing:border-box;
}
.ui-modal.ui-modal--full.product-view__gallery--full-screen.zgg-zcrave-modal.is-open{display:block;opacity:1;}

.zoom-view-overlay{position:absolute;inset:0;background:rgb(255 255 255 / 35%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
#overlay-container-content.zoom-view-overlay__portal{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;
  -webkit-overflow-scrolling:touch;gap:24px;padding:40px 16px 80px;
}

/* images in desktop lightbox */
#overlay-container-content .product-image{background:transparent;border:0;padding:0;margin:0;display:block;cursor:var(--zgg-plus-cursor);}
#overlay-container-content .product-image *{cursor:inherit;}
#overlay-container-content .product-image:hover,#overlay-container-content .product-image:active{cursor:var(--zgg-minus-cursor);}
#overlay-container-content .product-image picture,
#overlay-container-content .product-image img{display:block;max-width:min(90vw,1200px);width:auto;height:auto;object-fit:contain}

/* Close + down buttons */
.scroll-direction-ellipse{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  height:55px;width:55px;background:#fff;clip-path:ellipse(25px 25px);opacity:.5;z-index:10012;
  display:flex;align-items:center;justify-content:center;border:none;outline:none;cursor:pointer;
}
.scroll-direction-ellipse svg{width:18px;height:18px;color:#000;}
.mfe-btn.mfe-btn--borderless.closebtn{
  position:fixed;top:24px;right:24px;width:40px;height:40px;padding:10px;background:#fff;border-radius:0;opacity:.7;border:none;outline:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10012;
}
.mfe-btn.mfe-btn--borderless.closebtn svg{width:18px;height:18px;color:#000;}
@media (min-width:1024px){
  html.zgg-lightbox-open header,
  html.zgg-lightbox-open .site-header,
  html.zgg-lightbox-open #masthead,
  html.zgg-lightbox-open .elementor-location-header,
  html.zgg-lightbox-open .header,
  html.zgg-lightbox-open #header{display:none!important;}
}

/* =========================================================
   ZCRAVE LIGHTBOX — MOBILE (logo-only header + swipe carousel)
   ========================================================= */
.zgg-mobile-modal{
  position:fixed;inset:0;z-index:999999;display:none;background:#fff;opacity:0;
  animation:zggMobileIn .4s linear forwards;
}
.zgg-mobile-modal.is-open{display:block;opacity:1;}
@keyframes zggMobileIn{from{opacity:0} to{opacity:1}}

/* Fixed header shell */
.zgg-mobile-header{
  position:fixed;left:0;right:0;top:0;display:block;background:#fff;border-bottom:0px solid #ececec;z-index:10050;
  height:auto; /* JS sets exact height = live header height */
}

/* Logo box (absolute inside header, JS sizes/positions it to match live header) */
.zgg-mobile-logo{
  position:absolute;left:0;top:0;width:auto;height:auto;pointer-events:none;z-index:10051;
}
.zgg-mobile-logo img{display:block;width:100%;height:100%;object-fit:contain}

/* Close button centered within header */
.zgg-mobile-close{
  position:absolute;right:0px;width:40px;height:40px;padding:8px;background:#fff;border:0;border-radius:0px;opacity:1;
  display:flex;align-items:center;justify-content:center;z-index:10052;top:0px;
}
.zgg-mobile-close svg{width:14px;height:14px;display:block;color:#000;}

/* Carousel sits directly under header; bottom space for dots */
.zgg-mobile-carousel{
  position:absolute;left:0;right:0;bottom:56px;touch-action:pan-y;overflow:hidden;background:#fff;
  /* JS sets top = header height */
}
.zgg-track{height:100%;display:flex;transform:translate3d(0,0,0);transition:transform .3s cubic-bezier(.22,1,.36,1);}
.zgg-slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;}
.zgg-slide picture,.zgg-slide img{max-width:100vw;max-height:100%;width:auto;height:100%;object-fit:contain;display:block;}

.zgg-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;cursor:pointer;background:none;border-radius:20px;opacity:1;
  display:flex;align-items:center;justify-content:center;z-index:10021;
}
.zgg-arrow--prev{left:10px;}
.zgg-arrow--next{right:10px;}
.zgg-arrow svg{width:14px;height:14px;display:block;color:#000;}

.zgg-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;gap:8px;justify-content:center;align-items:center;}
.zgg-dot{width:6px;height:6px;border-radius:50%;background:#d0d0d0;opacity:.9;}
.zgg-dot.is-active{background:#000;}