/* v1.0.4: Keep Astra/Woo layout intact by mounting UI INSIDE .woocommerce-product-gallery */
.woocommerce-product-gallery { position: relative; }

/* Tabs overlayed in the media area */
.wooh-s3dv__tabs{
  position:relative;
  z-index:10;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 10px 0;
}
.wooh-s3dv__tab{
  border:1px solid rgba(0,0,0,.15);
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,0.92);
  cursor:pointer;
  font:inherit;
  backdrop-filter: blur(6px);
}
.wooh-s3dv__tab.is-active{ border-color: rgba(0,0,0,.35); font-weight:600; }

.wooh-s3dv__panel[hidden]{ display:none !important; }
.wooh-s3dv__panel{ position: relative; }

/* 3D viewer */
.wooh-s3dv__model{
  display:block;
  width:100%;
  height:520px;
  min-height:420px;
  background:#f6f6f6;
  border-radius:12px;
}

/* Loader overlay */
.wooh-s3dv__loader{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(246,246,246,0.92);
  border-radius:12px;
  z-index:20;
}
.wooh-s3dv__spinner{
  width:32px; height:32px;
  border-radius:50%;
  border:3px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.45);
  animation: woohSpin 0.9s linear infinite;
}
@keyframes woohSpin { to { transform: rotate(360deg); } }
.wooh-s3dv__loader-text{ font-size:14px; }

/* Video */
.wooh-s3dv__video{ display:block; width:100%; border-radius:12px; }
.wooh-s3dv__video-embed iframe{
  width:100% !important;
  height:520px !important;
  border-radius:12px;
}

@media (max-width:768px){
  .wooh-s3dv__model{ height:420px; min-height:360px; }
  .wooh-s3dv__video-embed iframe{ height:420px !important; }
}
@media (max-width:480px){
  .wooh-s3dv__model{ height:360px; min-height:300px; }
  .wooh-s3dv__video-embed iframe{ height:360px !important; }
}

/* v1.0.5: panels are inserted in the main stage, thumbs stay managed by Woo */
.wooh-s3dv__stage{position:relative;}


/* v1.0.6: prevent giant boxes and add zoom controls */
.wooh-s3dv__panel--3d,
.wooh-s3dv__panel--video{
  position: relative;
}

.wooh-s3dv__model{
  /* allow JS to define a reliable height */
  height: var(--wooh-s3dv-stage-h, 520px);
  min-height: 320px;
  touch-action: pan-y; /* allow page scroll */
}

/* Ensure video iframe follows the same height */
.wooh-s3dv__panel--video iframe{
  height: var(--wooh-s3dv-stage-h, 520px) !important;
}

/* Zoom control buttons */
.wooh-s3dv__controls{
  position:absolute;
  right:12px;
  
  z-index:35;
  display:flex;
  gap:8px;
}
.wooh-s3dv__ctrl{
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,0.92);
  cursor:pointer;
  font:inherit;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(6px);
}
.wooh-s3dv__ctrl:active{ transform: translateY(1px); }


/* v1.0.8: hide Woo stage/thumbs without display:none (prevents flexslider glitches) */
.wooh-s3dv-hidden{
  position:absolute !important;
  left:-99999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* v1.0.9: reliable mode switching without breaking slider layout */
.wooh-s3dv-mode-3d .woocommerce-product-gallery__wrapper,
.wooh-s3dv-mode-3d .flex-control-thumbs,
.wooh-s3dv-mode-3d ol.flex-control-nav,
.wooh-s3dv-mode-3d ul.flex-control-nav{
  height:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.wooh-s3dv-mode-video .woocommerce-product-gallery__wrapper,
.wooh-s3dv-mode-video .flex-control-thumbs,
.wooh-s3dv-mode-video ol.flex-control-nav,
.wooh-s3dv-mode-video ul.flex-control-nav{
  height:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Keep tabs visible in all modes */
.wooh-s3dv-mode-3d .wooh-s3dv__tabs,
.wooh-s3dv-mode-video .wooh-s3dv__tabs{
  visibility:visible !important;
  height:auto !important;
  overflow:visible !important;
  pointer-events:auto !important;
}

/* Viewer panels should not push huge vertical space beyond stage height */
.wooh-s3dv__panel--3d,
.wooh-s3dv__panel--video{
  margin-top:0;
}


/* v1.1.0: media panels are OUTSIDE .woocommerce-product-gallery, inside a wrapper in the left column */
.wooh-s3dv-wrap{ position:relative; }
.wooh-s3dv-wrap .wooh-s3dv__tabs{ margin:0 0 10px 0; }

/* Collapse the native Woo gallery (stage+thumbs) when in 3D or Video mode */
.wooh-s3dv-wrap.wooh-s3dv-mode-3d .woocommerce-product-gallery,
.wooh-s3dv-wrap.wooh-s3dv-mode-video .woocommerce-product-gallery{
  height:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  pointer-events:none !important;
  margin:0 !important;
}

/* Panels live as siblings to the gallery, so they don't push thumbs around */
.wooh-s3dv-wrap .wooh-s3dv__panel--3d,
.wooh-s3dv-wrap .wooh-s3dv__panel--video{
  margin:0;
}


/* v1.1.1: keep Woo/Astra column layout (do NOT create a new width-less wrapper) */
.wooh-s3dv-container{ position:relative; }

/* Tabs should not cover sale badge; keep them below badge stacking */
.wooh-s3dv-container .wooh-s3dv__tabs{ position:relative; z-index:1; margin:0 0 12px 0; }
.wooh-s3dv-container .woocommerce span.onsale,
.wooh-s3dv-container span.onsale{ z-index:5; }

/* Ensure 3D/video panels stay inside left column and don't become full-width */
.wooh-s3dv-container .wooh-s3dv__panel--3d,
.wooh-s3dv-container .wooh-s3dv__panel--video{
  width:100%;
  max-width:100%;
  position:relative; /* so zoom controls are inside */
  clear:none;
}

/* Hide the native gallery when in 3D/Video mode */
.wooh-s3dv-container.wooh-s3dv-mode-3d .woocommerce-product-gallery,
.wooh-s3dv-container.wooh-s3dv-mode-video .woocommerce-product-gallery{
  display:none !important;
}

/* Make sure controls are inside the 3D panel */
.wooh-s3dv__panel--3d .wooh-s3dv__controls{
  position:absolute;
  right:12px;
  top:12px;
  z-index:10;
}


/* v1.1.2: responsive width alignment with Woo/Astra layout */
/* Desktop: left media column ~50% */
@media (min-width: 768px){
  .wooh-s3dv-container{
    width:100%;
  }
  .wooh-s3dv-container .wooh-s3dv__panel--3d,
  .wooh-s3dv-container .wooh-s3dv__panel--video,
  .wooh-s3dv-container .wooh-s3dv__tabs{
    max-width:100%;
  }
}

/* Mobile: full width */
@media (max-width: 767px){
  .wooh-s3dv-container .wooh-s3dv__panel--3d,
  .wooh-s3dv-container .wooh-s3dv__panel--video{
    width:100%;
  }
}


/* v1.1.3: group promo badge + tabs + panels + gallery in one homogeneous wrapper */
.wooh-s3dv-media-group{
  position:relative;
  width:100%;
  max-width:100%;
  display:block;
}

/* Ensure badge stays above tabs but does not get covered */
.wooh-s3dv-media-group .ast-on-card-button.ast-onsale-card,
.wooh-s3dv-media-group span.onsale{
  z-index:6;
}

.wooh-s3dv-media-group .wooh-s3dv__tabs{
  z-index:2;
}

/* Never force inline widths; let the column define width */
.wooh-s3dv-media-group .wooh-s3dv__tabs,
.wooh-s3dv-media-group .wooh-s3dv__panel--3d,
.wooh-s3dv-media-group .wooh-s3dv__panel--video,
.wooh-s3dv-media-group .woocommerce-product-gallery{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  clear:none !important;
}

/* When switching to 3D/video, hide native gallery inside the media group */
.wooh-s3dv-media-group.wooh-s3dv-mode-3d .woocommerce-product-gallery,
.wooh-s3dv-media-group.wooh-s3dv-mode-video .woocommerce-product-gallery{
  display:none !important;
}


/* v1.1.4: force the MEDIA GROUP to occupy 50% on desktop, 100% on mobile.
   This guarantees product summary can sit on the right if the theme uses a two-column layout. */
@media (min-width: 768px){
  .wooh-s3dv-media-group{
    width:50% !important;
    float:left !important;
  }
}

@media (max-width: 767px){
  .wooh-s3dv-media-group{
    width:100% !important;
    float:none !important;
  }
}


/* v1.1.5: promo badge is anchored inside the media group */
.wooh-s3dv-media-group{
  position:relative;
}
.wooh-s3dv-media-group .ast-on-card-button.ast-onsale-card,
.wooh-s3dv-media-group span.onsale{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  z-index:20 !important;
  margin:0 !important;
  pointer-events:none; /* badge shouldn't block tabs/media interactions */
}


/* v1.1.6: badge should live INSIDE the Woo gallery box, not the media group */
.woocommerce-product-gallery{
  position:relative;
}
.woocommerce-product-gallery .ast-on-card-button.ast-onsale-card,
.woocommerce-product-gallery span.onsale{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  z-index:30 !important;
  margin:0 !important;
  pointer-events:none;
}

/* v1.1.6: mobile spacing so breadcrumb isn't glued */
@media (max-width: 767px){
  .wooh-s3dv__panel--3d,
  .wooh-s3dv__panel--video{
    margin-bottom:16px !important;
  }
}


.wooh-s3dv__pdf-link{
  display:inline-block;
  padding:12px 16px;
  background:#000;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}
.wooh-s3dv__pdf-link:hover{opacity:.85;}


/* Tabs layout */
.wooh-s3dv__tabs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* PDF link button (not a tab) */
.wooh-s3dv__pdf-btn{
  margin-left:auto;
  padding:8px 12px;
  border-radius:6px;
  border:1px solid #ddd;
  background:#f6f6f6;
  color:#000;
  text-decoration:none;
  font-weight:600;
  line-height:1;
}
.wooh-s3dv__pdf-btn:hover{ background:#ededed; }

@media (max-width: 767px){
  .wooh-s3dv__pdf-btn{ margin-left:0; }
}


}

.wooh-s3dv__actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
  z-index:6;
  margin-bottom:12px;
}
.wooh-s3dv__tabs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* PDF link displayed as a tab button */
.wooh-s3dv__tab--pdf-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}