/* ======================= PDP MOBILE (CLEAN) ======================= */
/* Scope toggle – mobile PDP only */
.pdp-mobile-only { display: block; }

/* Hide default Woo gallery & buy box on mobile (we render custom ones) */
.pdp-mobile-active .woocommerce-product-gallery,
.pdp-mobile-active .entry-summary .price,
.pdp-mobile-active .entry-summary form.cart {
  display: none !important;
}

/* Woo "Sale/حراج" badge: hide on single product only (CSS fallback) */
.single-product .onsale { display: none !important; }

/* ---------- Hero / Media Track ---------- */
#pdp-mobile-hero { position: relative; background: #000; }

/* Horizontal, one-slide-per-viewport */
.pdp-media-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  scrollbar-width: none;
}
.pdp-media-track::-webkit-scrollbar { display: none; }

.pdp-media-track .pdp-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
  height: 58vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}

/* Media scaling */
#pdp-mobile-hero .pdp-slide img,
#pdp-mobile-hero .pdp-slide video,
#pdp-fullscreen .pdp-fs-stage img,
#pdp-fullscreen .pdp-fs-stage video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* Force LTR flow even on RTL sites */
.pdp-mobile-active #pdp-mobile-hero,
.pdp-mobile-active #pdp-mobile-hero .pdp-media-track { direction: ltr !important; }
.pdp-mobile-active #pdp-mobile-hero .pdp-media-track { overscroll-behavior-x: contain; }
.pdp-mobile-active #pdp-mobile-hero .pdp-media-track { scroll-behavior: smooth; }

/* ---------- Tabs ---------- */
.pdp-tabs {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.pdp-tab {
  flex: 1 1 auto;
  appearance: none;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  padding: 10px 6px;
  border-radius: 8px;
  font-size: 14px;
}
.pdp-tab.is-active { border-color: #111; background: #fff; }

/* Technical review panel */
.pdp-tech-panel {
  padding: 12px;
  background: #fff;
  color: #000;
  line-height: 1.6;
}

/* ---------- Bottom buy bar ---------- */
#pdp-bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #eee;
}
#pdp-bottom-bar .pdp-bottom-price { font-weight: 600; }
#pdp-bottom-bar .single_add_to_cart_button {
  width: 100%;
  border-radius: 10px;
  font-size: 16px;
}

/* ---------- Fullscreen overlay ---------- */
.pdp-fullscreen {
  position: fixed;
  inset: 0;
  background: #000 !important;
  z-index: 9999;
  display: none;
}
.pdp-fullscreen.is-open { display: block; }
.pdp-fs-inner { position: relative; width: 100%; height: 100%; }
.pdp-fs-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Lock page scroll while fullscreen */
html.pdp-fs-open, html.pdp-fs-open body { overflow: hidden; }

/* Pin buy bar over fullscreen */
.pdp-fullscreen.is-open ~ #pdp-bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  background: #111;
  color: #fff;
}
.pdp-fullscreen.is-open ~ #pdp-bottom-bar .woocommerce-Price-amount,
.pdp-fullscreen.is-open ~ #pdp-bottom-bar .amount,
.pdp-fullscreen.is-open ~ #pdp-bottom-bar .price { color: #fff; }
.pdp-fullscreen.is-open ~ #pdp-bottom-bar .single_add_to_cart_button { background: #28b138 !important; }

/* Hide header/search while fullscreen */
.pdp-fullscreen.is-open ~ header,
.pdp-fullscreen.is-open ~ #masthead,
.pdp-fullscreen.is-open ~ .site-header {
  opacity: 0; pointer-events: none;
}

/* Pointer cursor on media */
.pdp-slide img, .pdp-slide video { cursor: pointer; }

/* ================== VIDEO UI (INLINE & FULLSCREEN) ================== */
/* Play/Pause ring (one color gray; no fill) */
.pdp-slide[data-type="video"] { position: relative; }
.pdp-play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:999px;
  background:transparent;
  border:3px solid rgba(220,220,220,0.95);
  color:rgba(220,220,220,0.95);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; cursor:pointer; z-index:3;
}
.pdp-play-btn:focus{ outline:none; }
/* paused: gray ▶ */
.pdp-play-btn[data-state="paused"]::before{ content:"▶"; }
/* playing: two bars; button fades to 20% transparency */
.pdp-play-btn[data-state="playing"]{ opacity:.2; }
.pdp-play-btn[data-state="playing"]::before{ content:"‖"; }

/* Disable native controls inline (we manage taps); keep pointer events off */
.pdp-slide[data-type="video"] video::-webkit-media-controls{ display:none !important; }
.pdp-slide[data-type="video"] video{ pointer-events:none; }

/* Full-cover tap shield (JS decides: start inline or open FS) */
.pdp-tapshield{
  position:absolute; inset:0; z-index:2;
  background:transparent; border:0; margin:0; padding:0; cursor:pointer;
}

/* Volume button (bottom-right). Same gray for mute/unmute. No red line. */
.pdp-vol-btn{
  position:absolute; right:10px; bottom:10px; z-index:4;
  background:rgba(0,0,0,.35);
  color:rgba(220,220,220,.7);
  border:1px solid rgba(255,255,255,.18);
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.pdp-vol-btn[data-muted="true"]::before{ content:"🔇"; }
.pdp-vol-btn[data-muted="false"]::before{ content:"🔊"; }

/* ================== FULLSCREEN CONTROLS ================== */
/* Back arrow (small square, true <) */
.pdp-fs-back{
  position:absolute; top:10px; left:10px; z-index:5;
  width:34px; height:34px; border-radius:8px;
  background:rgba(0,0,0,.5);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.pdp-fs-back::before{ content:"<"; }
.pdp-fs-close{ display:none !important; } /* ensure only back arrow shows */

/* Page counter (e.g., 1/3) */
.pdp-fs-counter{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:5; color:#fff; background:rgba(0,0,0,.45);
  padding:6px 10px; border-radius:10px; font-size:14px;
  border:1px solid rgba(255,255,255,.25);
}

/* (If you later want a custom seek bar again, create .pdp-fs-seek styles here) */
/* ===================================================================== */




/* ===== PDP MOBILE – OVERRIDES (append-only) ===== */

/* Horizontal swipe & LTR flow (never stack vertically) */
.pdp-mobile-active #pdp-mobile-hero,
.pdp-mobile-active #pdp-mobile-hero .pdp-media-track { direction: ltr !important; }
.pdp-mobile-active #pdp-mobile-hero .pdp-media-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scroll-behavior: smooth !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-media-track .pdp-slide {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  width: 100% !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Media fit (photos + videos) */
#pdp-mobile-hero .pdp-slide img,
#pdp-mobile-hero .pdp-slide video,
#pdp-fullscreen .pdp-fs-stage img,
#pdp-fullscreen .pdp-fs-stage video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Lock scroll while fullscreen + keep buy bar visible */
html.pdp-fs-open, html.pdp-fs-open body { overflow: hidden !important; }
.pdp-fullscreen { background:#000 !important; }
.pdp-fullscreen.is-open ~ #pdp-bottom-bar {
  position: fixed !important; left:0; right:0; bottom:0;
  background:#111; color:#fff; border-top:1px solid rgba(255,255,255,.15);
}
.pdp-fullscreen.is-open ~ #pdp-bottom-bar .woocommerce-Price-amount,
.pdp-fullscreen.is-open ~ #pdp-bottom-bar .amount,
.pdp-fullscreen.is-open ~ #pdp-bottom-bar .price { color:#fff !important; }

/* Hide site header while fullscreen */
.pdp-fullscreen.is-open ~ header,
.pdp-fullscreen.is-open ~ #masthead,
.pdp-fullscreen.is-open ~ .site-header { opacity:0; pointer-events:none; }

/* ---- Video UI (ring button, volume, tap shield) ---- */
.pdp-slide[data-type="video"] { position: relative; }
.pdp-slide[data-type="video"] video::-webkit-media-controls { display:none !important; }
.pdp-slide[data-type="video"] video { pointer-events:none !important; }

.pdp-tapshield{
  position:absolute; inset:0; z-index:2;
  background:transparent; border:0; margin:0; padding:0; cursor:pointer;
}

/* Play/Pause ring — one gray color, no fill */
.pdp-play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:999px;
  background:transparent !important;
  border:3px solid rgba(220,220,220,0.95) !important;
  color:rgba(220,220,220,0.95) !important;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; cursor:pointer; z-index:3;
}
.pdp-play-btn:focus{ outline:none; }
.pdp-play-btn[data-state="paused"]::before{ content:"▶"; }
.pdp-play-btn[data-state="playing"]{ opacity:.2 !important; }   /* ~20% visible */
.pdp-play-btn[data-state="playing"]::before{ content:"‖"; }      /* two bars */

/* Volume button — same mono gray for mute/unmute (no red/colored line) */
.pdp-vol-btn{
  position:absolute; right:10px; bottom:10px; z-index:4;
  background:rgba(0,0,0,.35) !important;
  color:rgba(220,220,220,.7) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.pdp-vol-btn[data-muted="true"]::before{ content:"🔇"; }
.pdp-vol-btn[data-muted="false"]::before{ content:"🔊"; }

/* Fullscreen back button — smaller square, true '<' */
.pdp-fs-back{
  position:absolute; top:10px; left:10px; z-index:5;
  width:34px; height:34px; border-radius:8px;
  background:rgba(0,0,0,.5) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.25) !important;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.pdp-fs-back::before{ content:"<"; }
.pdp-fs-close{ display:none !important; }

/* Fullscreen page counter */
.pdp-fs-counter{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:5; color:#fff; background:rgba(0,0,0,.45);
  padding:6px 10px; border-radius:10px; font-size:14px;
  border:1px solid rgba(255,255,255,.25);
}

/* Hide any custom seekbar you may still have; rely on native controls */
.pdp-fs-seek{ display:none !important; }

/* Hide WooCommerce sale (حراج) badge on single product as a CSS backstop */
.single-product .onsale { display:none !important; }

/* ===== PDP MOBILE – ICON OVERRIDES (darkoob theme) ===== */

/* Play/Pause ring – one gray color, no fill */
.pdp-play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:999px;
  background:transparent !important;
  border:3px solid rgba(220,220,220,0.95) !important;
  color:rgba(220,220,220,0.95) !important;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; cursor:pointer; z-index:3;
}
.pdp-play-btn:focus{ outline:none; }

/* Paused: show triangle glyph */
.pdp-play-btn[data-state="paused"]::before{ content:"▶"; }

/* Playing: use your circle-pause PNG, super transparent (20%) */
.pdp-play-btn[data-state="playing"]{
  opacity:.2 !important;
  color:transparent !important;
  background-image:url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:70% 70%;
}
.pdp-play-btn[data-state="playing"]::before{ content:""; } /* remove glyph */

/* Inline video: block native controls; we handle UI */
.pdp-slide[data-type="video"] video::-webkit-media-controls{ display:none !important; }
.pdp-slide[data-type="video"] video{ pointer-events:none !important; }

/* Full-cover tap shield */
.pdp-tapshield{
  position:absolute; inset:0; z-index:2;
  background:transparent; border:0; margin:0; padding:0; cursor:pointer;
}

/* Volume button (same gray both states) – use your images */
.pdp-vol-btn{
  position:absolute; right:10px; bottom:10px; z-index:4;
  width:38px; height:38px; border-radius:8px;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(0,0,0,.35) url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png") center/18px 18px no-repeat !important;
  color:transparent !important;
}
.pdp-vol-btn::before{ content:""; }
.pdp-vol-btn[data-muted="true"]{
  background-image:url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png") !important;
}

/* Fullscreen: hide browser overlay play icon (keep timeline) */
#pdp-fullscreen .pdp-fs-stage video::-webkit-media-controls-start-playback-button,
#pdp-fullscreen .pdp-fs-stage video::-webkit-media-controls-overlay-play-button{
  display:none !important;
}

/* Fullscreen back button (left arrow) */
.pdp-fs-back{
  position:absolute; top:10px; left:10px; z-index:5;
  width:34px; height:34px; border-radius:8px;
  background:rgba(0,0,0,.5) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.25) !important;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.pdp-fs-back::before{ content:"<"; }
.pdp-fs-close{ display:none !important; }

/* Page counter */
.pdp-fs-counter{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:5; color:#fff; background:rgba(0,0,0,.45);
  padding:6px 10px; border-radius:10px; font-size:14px;
  border:1px solid rgba(255,255,255,.25);
}


/* === FIX: use real images for icons + 40% visibility === */

/* Center ring while PLAYING uses your pause icon */
.pdp-play-btn[data-state="playing"]{
  opacity:.4 !important; /* 40% */
  color:transparent !important;
  background-image:url("https://daraje-1.com/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:70% 70% !important;
}
.pdp-play-btn[data-state="playing"]::before{ content:""; } /* no glyph */
.pdp-play-btn[data-state="paused"]::before{ content:"▶"; } /* paused=triangle */

/* Volume button uses your images for both states (same gray, 40%) */
.pdp-vol-btn{
  opacity:.4 !important; /* 40% */
  background-color:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  width:38px; height:38px; border-radius:8px;
  background-image:url("https://daraje-1.com/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png") !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:18px 18px !important;
  color:transparent !important;
}
.pdp-vol-btn::before{ content:""; } /* remove emoji */
.pdp-vol-btn[data-muted="true"]{
  background-image:url("https://daraje-1.com/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png") !important;
  background-size:18px 18px !important;
}

/* Hide WebKit’s giant overlay play icon in fullscreen (we keep timeline) */
#pdp-fullscreen .pdp-fs-stage video::-webkit-media-controls-start-playback-button,
#pdp-fullscreen .pdp-fs-stage video::-webkit-media-controls-overlay-play-button{
  display:none !important;
}


/* Enable native controls everywhere; remove old custom buttons */
.pdp-slide[data-type="video"] video { pointer-events:auto !important; }
.pdp-slide[data-type="video"] video::-webkit-media-controls { display: initial !important; }



/* === PDP MOBILE: restore custom inline video controls; keep native in FS === */

/* Inline: hide native controls so our buttons are visible/tappable */
.pdp-mobile-active .pdp-slide[data-type="video"] video::-webkit-media-controls { display: none !important; }
.pdp-mobile-active .pdp-slide[data-type="video"] video { pointer-events: none !important; }

/* Show our custom buttons on INLINE slides */
.pdp-mobile-active .pdp-slide .pdp-play-btn,
.pdp-mobile-active .pdp-slide .pdp-vol-btn,
.pdp-mobile-active .pdp-slide .pdp-tapshield { display: flex !important; }

/* Fullscreen: show native controls and let the user interact directly */
#pdp-fullscreen .pdp-fs-stage video { pointer-events: auto !important; }
#pdp-fullscreen .pdp-fs-stage video::-webkit-media-controls { display: initial !important; }

/* Keep the existing visual styles you already have for .pdp-play-btn / .pdp-vol-btn */

/* === FORCE OUR INLINE VIDEO CONTROLS + ICON PNGs; DISABLE ALL OTHERS === */

/* Inline videos: kill native overlay/controls completely (we show our own) */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] video::-webkit-media-controls {
  display: none !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] video {
  pointer-events: none !important; /* let taps hit our buttons */
}

/* Always show our buttons inline (override any previous display:none) */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-play-btn,
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-vol-btn,
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-tapshield {
  display: flex !important;
}

/* Ensure stacking above video */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] { position: relative !important; }
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-play-btn { z-index: 3 !important; }
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-vol-btn  { z-index: 4 !important; }
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-tapshield{ z-index: 2 !important; }

/* ---- PLAY/PAUSE (center ring) uses your PNGs ---- */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn{
  width:56px; height:56px; border-radius:999px;
  background-color: transparent !important;
  border:3px solid rgba(220,220,220,0.95) !important;
  color: transparent !important; /* hide any glyph */
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:70% 70% !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn[data-state="paused"]{
  background-image:url("/wp-content/themes/darkoob/assets/img/pdp/icon-play.png") !important;
  opacity: .9 !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn[data-state="playing"]{
  background-image:url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png") !important;
  opacity: .4 !important;  /* faint while playing */
}

/* ---- MUTE/UNMUTE (bottom-right) uses your PNGs ---- */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn{
  position:absolute; right:10px; bottom:10px;
  width:38px; height:38px; border-radius:8px;
  border:1px solid rgba(255,255,255,.18) !important;
  background-color: rgba(0,0,0,.35) !important;
  color: transparent !important; /* remove emoji/glyph */
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:18px 18px !important;
  opacity:.9 !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn[data-muted="false"]{
  background-image:url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png") !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn[data-muted="true"]{
  background-image:url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png") !important;
}

/* Inline: hide ANY other theme icons/emojis for play/volume by force */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn::before,
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn::before {
  content:"" !important;
}

/* Fullscreen: allow native controls (timeline etc.) */
#pdp-fullscreen .pdp-fs-stage video { pointer-events: auto !important; }
#pdp-fullscreen .pdp-fs-stage video::-webkit-media-controls { display: initial !important; }
/* and hide webkit's giant overlay icons if any */
#pdp-fullscreen .pdp-fs-stage video::-webkit-media-controls-start-playback-button,
#pdp-fullscreen .pdp-fs-stage video::-webkit-media-controls-overlay-play-button{
  display:none !important;
}


/* === PDP ICONS — FINAL OVERRIDE (white @70%, no circle) === */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-play-btn,
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-vol-btn{
  /* keep size/position from earlier rules, but kill the ring */
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;

  /* show only the PNG icon */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 70% 70% !important; /* play/pause center icon */
  color: transparent !important;       /* hide glyphs */
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn::before,
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn::before{
  content: "" !important; /* nuke emoji/text icons */
}

/* PLAY / PAUSE (center button) */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn[data-state="paused"]{
  background-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-play.png") !important;
  opacity: .7 !important;                           /* 70% visibility */
  filter: brightness(0) invert(1) !important;       /* make white */
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn[data-state="playing"]{
  background-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png") !important;
  opacity: .7 !important;
  filter: brightness(0) invert(1) !important;
}

/* MUTE / UNMUTE (bottom-right) */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn{
  width: 38px; height: 38px; border-radius: 8px;    /* keep your size */
  background-size: 18px 18px !important;            /* smaller icon */
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn[data-muted="false"]{
  background-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png") !important;
  opacity: .7 !important;
  filter: brightness(0) invert(1) !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn[data-muted="true"]{
  background-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png") !important;
  opacity: .7 !important;
  filter: brightness(0) invert(1) !important;
}

/* Optional: ensure video overlay controls are visible above video */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-play-btn{ z-index: 3 !important; }
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-vol-btn{  z-index: 4 !important; }

/* Optional: if any leftover borders sneak in from other files */
.pdp-play-btn, .pdp-vol-btn { border: 0 !important; }


/* ================== PDP ICONS: WHITE + TRANSPARENCY (INLINE + FULLSCREEN) ================== */
/* Targets both small (inline) and large (fullscreen) */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn,
#pdp-fullscreen .pdp-play-btn {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background: transparent !important;
  border: none !important; box-shadow: none !important;
  color: transparent !important;                 /* kill any text glyphs */
  z-index: 5;
  /* remove any default ring */
  outline: none !important;
}

/* Use the PNG as a mask so we can color it PURE WHITE with alpha */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn,
#pdp-fullscreen .pdp-play-btn {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 70% 70%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 70% 70%;
}

/* Paused = PLAY icon → white @ 60% visibility */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn[data-state="paused"],
#pdp-fullscreen .pdp-play-btn[data-state="paused"]{
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-play.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-play.png");
  background-color: rgba(255,255,255,0.6) !important; /* 60% white */
  opacity: 1 !important;
}

/* Playing = PAUSE icon → white @ 40% (more transparent as requested) */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn[data-state="playing"],
#pdp-fullscreen .pdp-play-btn[data-state="playing"]{
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png");
  background-color: rgba(255,255,255,0.4) !important; /* 40% white */
  opacity: 1 !important;
}

/* Remove any pseudo-glyphs that might be set elsewhere */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-play-btn::before,
#pdp-fullscreen .pdp-play-btn::before { content:"" !important; }

/* -------- Volume (Mute/Unmute) -------- */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn,
#pdp-fullscreen .pdp-vol-btn {
  position:absolute; right:10px; bottom:10px;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background: transparent !important;
  border: none !important; box-shadow: none !important;
  color: transparent !important;
  z-index: 6;
  /* mask setup for white icon */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 18px 18px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 18px 18px;
  background-color: rgba(255,255,255,0.6) !important; /* 60% white */
}

/* Unmuted = speaker */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn[data-muted="false"],
#pdp-fullscreen .pdp-vol-btn[data-muted="false"]{
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png");
}

/* Muted = speaker with slash */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn[data-muted="true"],
#pdp-fullscreen .pdp-vol-btn[data-muted="true"]{
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png");
}

/* Kill any emoji/pseudo-content */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide .pdp-vol-btn::before,
#pdp-fullscreen .pdp-vol-btn::before { content:"" !important; }

/* Ensure video doesn’t block taps inline (fullscreen is handled in JS) */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] video {
  pointer-events: none !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] video::-webkit-media-controls{
  display:none !important;
}


/* ===== PDP: FINAL ICON VISIBILITY TWEAKS (apply last) ===== */

/* Reset any leftover opacity/rings everywhere */
.pdp-play-btn,
.pdp-vol-btn {
  opacity: 1 !important;                 /* we control visibility via color alpha, not element opacity */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: transparent !important;         /* kill glyphs */
  background: transparent !important;    /* base reset; masks below add the icon */
  z-index: 9;
}

/* Shared mask setup for both inline and fullscreen */
.pdp-play-btn {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 70% 70%; mask-size: 70% 70%;
  width: 56px; height: 56px;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.pdp-vol-btn {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
  width: 38px; height: 38px;
  position: absolute; right: 10px; bottom: 10px;
}

/* ---- PLAY / PAUSE (exact same in inline + fullscreen) ---- */
/* Paused = PLAY icon: 60% white */
.pdp-play-btn[data-state="paused"]{
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-play.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-play.png");
  background-color: rgba(255,255,255,0.60) !important;
}
/* Playing = PAUSE icon: 40% white (more transparent) */
.pdp-play-btn[data-state="playing"]{
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png");
  background-color: rgba(255,255,255,0.40) !important;
}
/* kill any pseudo-glyphs */
.pdp-play-btn::before { content: "" !important; }

/* ---- MUTE / UNMUTE (increase visibility by ~40%) ---- */
/* Target both inline + fullscreen; use strong white */
.pdp-vol-btn{
  background-color: rgba(255,255,255,0.85) !important;  /* was ~0.6 → now ~0.85 */
}
.pdp-vol-btn[data-muted="false"]{
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png");
}
.pdp-vol-btn[data-muted="true"]{
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png");
}
.pdp-vol-btn::before { content: "" !important; }

/* Ensure inline taps hit our buttons (fullscreen handled by JS) */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] video {
  pointer-events: none !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] video::-webkit-media-controls{
  display: none !important;
}

/* ========== PDP FIX: MAKE VOLUME ICON CLEAR (INLINE + FULLSCREEN) ========== */
/* 1) Nuke any old dark bg/opacity/borders on our buttons */
.pdp-play-btn,
.pdp-vol-btn {
  opacity: 1 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  color: transparent !important;  /* remove emoji glyphs */
}
.pdp-play-btn::before,
.pdp-vol-btn::before,
.pdp-play-btn::after,
.pdp-vol-btn::after { content: "" !important; }

/* 2) Shared mask plumbing so we can color icons pure white with alpha */
.pdp-play-btn,
.pdp-vol-btn {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* 3) PLAY/PAUSE — same in inline and fullscreen */
.pdp-play-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; z-index: 9;
  -webkit-mask-size: 70% 70%; mask-size: 70% 70%;
}
/* Paused = PLAY @ 60% white */
.pdp-play-btn[data-state="paused"] {
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-play.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-play.png");
  background-color: rgba(255,255,255,0.60) !important;
}
/* Playing = PAUSE @ 40% white (more transparent) */
.pdp-play-btn[data-state="playing"] {
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-pause.png");
  background-color: rgba(255,255,255,0.40) !important;
}

/* 4) VOLUME — strong readable white, no dark tile behind it */
.pdp-vol-btn {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; z-index: 10;
  -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
  /* make icon itself bright & readable */
  background-color: rgba(255,255,255,0.85) !important;
}
/* Unmuted */
.pdp-vol-btn[data-muted="false"] {
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-unmute.png");
}
/* Muted */
.pdp-vol-btn[data-muted="true"] {
  -webkit-mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png");
  mask-image: url("/wp-content/themes/darkoob/assets/img/pdp/icon-mute.png");
}

/* 5) Make sure inline video doesn’t swallow taps; fullscreen uses native */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] video {
  pointer-events: none !important;
}
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] video::-webkit-media-controls {
  display: none !important;
}

/* 6) Specific inline overrides — remove any old dark background on vol btn */
.pdp-mobile-active #pdp-mobile-hero .pdp-slide[data-type="video"] .pdp-vol-btn {
  background: transparent !important;            /* no black tile */
  background-color: rgba(255,255,255,0.85) !important; /* icon color */
  border: 0 !important;
  opacity: 1 !important;                          /* never fade the icon */
}

/* 7) Fullscreen: keep same clarity for volume button */
#pdp-fullscreen .pdp-vol-btn {
  background: transparent !important;
  background-color: rgba(255,255,255,0.85) !important;
  border: 0 !important;
  opacity: 1 !important;
}


/* ===== Fullscreen custom seek UI ===== */
#pdp-fullscreen .pdp-fs-seek {
  position:absolute; left:10%; right:10%; bottom:18px;
  display:flex !important; align-items:center; justify-content:center;
  gap:10px; z-index:8;
  opacity:0; transition:opacity .25s ease; pointer-events:none; /* default hidden */
}

#pdp-fullscreen .pdp-fs-time {
  color:#fff; font-size:14px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.6);
  min-width:86px; text-align:center;
}

#pdp-fullscreen .pdp-fs-bar {
  position:relative; flex:1 1 auto; height:6px; border-radius:4px;
  background:rgba(255,255,255,.25);
  pointer-events:auto; /* enable drag */
}
#pdp-fullscreen .pdp-fs-fill {
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:#fff; border-radius:4px;
}
#pdp-fullscreen .pdp-fs-thumb {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* Show/Hide helpers */
#pdp-fullscreen .pdp-fs-seek.is-visible { opacity:1; pointer-events:auto; }