/* EthnicHaat product photo viewer (assets/js/eh-zoom.js) */
html.ehz-lock, html.ehz-lock body{overflow:hidden !important;overscroll-behavior:none}

.ehz{--ehz-fade:1;position:fixed;inset:0;z-index:100050;display:none;flex-direction:column;
  background:rgba(14,9,10,calc(.992 * var(--ehz-fade)));color:#fff;
  font-family:"Google Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ehz.is-open{display:flex;animation:ehzIn .22s ease-out}
@keyframes ehzIn{from{opacity:0}to{opacity:1}}

/* top bar */
.ehz-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;opacity:var(--ehz-fade)}
.ehz-count{min-width:56px;font-size:14px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.9)}
.ehz-hint{flex:1;text-align:center;font-size:12.5px;color:rgba(255,255,255,.55);transition:opacity .2s}
.ehz.is-zoomed .ehz-hint{opacity:0}
.ehz-tools{display:flex;align-items:center;gap:6px}
.ehz-btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;font-size:15px;cursor:pointer;transition:background .15s}
.ehz-btn:hover{background:rgba(255,255,255,.22)}
.ehz-close{margin-left:6px;background:#fff;color:#2a1a14}
.ehz-close:hover{background:#f3d58f}
.ehz-zoom{min-width:44px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.75)}

/* stage + slides */
.ehz-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:zoom-in}
.ehz.is-zoomed .ehz-stage{cursor:grab}
.ehz.is-zoomed .ehz-stage:active{cursor:grabbing}
.ehz-track{display:flex;height:100%;will-change:transform}
.ehz-slide{position:relative;flex:0 0 100%;height:100%;display:grid;place-items:center;overflow:hidden}
/* photo always fits the whole screen (object-fit: contain); zoom is done with transform */
.ehz-img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;
  object-fit:contain !important;display:block;transform-origin:center center;
  will-change:transform;opacity:0;transition:opacity .2s;-webkit-user-drag:none;pointer-events:none}
.ehz-slide.is-ready .ehz-img{opacity:1}
.ehz-spin{position:absolute;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#f3d58f;animation:ehzSpin .8s linear infinite}
.ehz-slide.is-ready .ehz-spin{display:none}
@keyframes ehzSpin{to{transform:rotate(360deg)}}

.ehz-nav{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:17px;cursor:pointer;transition:background .15s,opacity .15s}
.ehz-nav:hover{background:rgba(255,255,255,.26)}
.ehz-prev{left:18px}.ehz-next{right:18px}
.ehz-nav[disabled]{opacity:0;pointer-events:none}
.ehz.is-zoomed .ehz-nav{opacity:0;pointer-events:none}

/* thumbnails */
.ehz-thumbs{position:relative;z-index:3;display:flex;justify-content:center;gap:8px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  overflow-x:auto;scrollbar-width:none;opacity:var(--ehz-fade);transition:transform .2s ease}
.ehz-thumbs::-webkit-scrollbar{display:none}
.ehz-thumb{flex:0 0 auto;width:52px;height:64px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#2a2124;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.ehz-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ehz-thumb.is-on{opacity:1;border-color:#f3d58f}
.ehz.is-single .ehz-thumbs,.ehz.is-single .ehz-nav{display:none}

@media (max-width:760px){
  .ehz-nav{display:none}
  .ehz-hint{font-size:11.5px}
  .ehz-tools .ehz-btn:not(.ehz-close),.ehz-zoom{display:none}
  .ehz-thumbs{justify-content:flex-start}
  .ehz-thumb{width:46px;height:58px}
}

/* desktop hover-zoom on the page photo */
.main-img-wrap.ehz-hoverable{cursor:zoom-in}
.product-detail-container .main-img-wrap #bigImage.ehz-hz,#bigImage.ehz-hz{transform:scale(2.2) !important;transition:transform .18s ease-out !important}
