/* ============================================================
   AUDIO PLANET — Botón de zoom + lightbox de la galería (v1.0)
============================================================= */

/* ---------- Botón de zoom ----------
   Mismo lenguaje que el botón de play del video y las flechas del
   lightbox: círculo translúcido con borde fino, ícono blanco y
   relleno cobre al pasar el mouse. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger{
  position:absolute !important; top:auto !important; left:auto !important;
  right:41px !important; bottom:66px !important; z-index:6;
  box-sizing:border-box !important;
  width:48px !important; height:48px !important; min-width:0 !important;
  margin:0 !important; padding:0 !important;
  display:block !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,.85) !important;
  background:rgba(28,27,27,.78) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45);
  color:#fff !important; font-size:0 !important; line-height:0 !important; text-indent:0 !important;
  text-decoration:none !important; cursor:zoom-in;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, border-color .3s ease, color .3s ease;
}
/* Los pseudo-elementos del botón los usa Blocksy: se anulan y el "+"
   va en un <span> propio que agrega ap-lightbox.js */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger::before,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger::after{ content:none !important; display:none !important; }
.ap-zoom-plus{
  position:absolute; top:50%; left:50%; width:16px; height:16px;
  margin:-8px 0 0 -8px; pointer-events:none;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.ap-zoom-plus::before,
.ap-zoom-plus::after{
  content:""; position:absolute; left:0; top:50%;
  width:16px; height:1.5px; margin-top:-.75px; border-radius:2px;
  background:currentColor;
}
.ap-zoom-plus::after{ transform:rotate(90deg); }
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus-visible{
  background:#C38356 !important; border-color:#C38356 !important; color:#1a1919 !important;
  transform:scale(1.08);
}
/* Al pasar el mouse, el "+" gira un cuarto de vuelta */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover .ap-zoom-plus{ transform:rotate(90deg); }
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus-visible{ outline:2px solid #d9a079; outline-offset:3px; }
.woocommerce-product-gallery figure.ct-media-container[data-src]{ cursor:zoom-in; }

/* PhotoSwipe queda sin uso: por si algo lo abriera, se mantiene oculto */
.pswp{ display:none !important; }

/* ---------- Lightbox ---------- */
html.aplb-lock{ overflow:hidden; }
html.aplb-lock body{ padding-right:var(--aplb-sb, 0); }

.aplb{
  --aplb-accent:#C38356; --aplb-accent-2:#d9a079; --aplb-ease:cubic-bezier(.16,1,.3,1);
  position:fixed; inset:0; z-index:100000;
  display:grid; grid-template-rows:auto 1fr auto;
  color:#EDEDEB; font-family:inherit;
}
.aplb[hidden]{ display:none; }
.aplb:focus{ outline:none; }

.aplb-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 45%, rgba(195,131,86,.10) 0%, rgba(195,131,86,0) 60%),
    rgba(16,15,15,.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .45s var(--aplb-ease);
}
.aplb.is-open .aplb-bg{ opacity:var(--aplb-fade, 1); }
.aplb.is-closing .aplb-bg{ opacity:0; transition-duration:.4s; }

/* Barra superior */
.aplb-top{
  position:relative; z-index:2; display:flex; align-items:center; gap:18px;
  padding:18px 22px 10px;
  opacity:0; transform:translateY(-14px);
  transition:opacity .4s ease .12s, transform .55s var(--aplb-ease) .12s;
}
.aplb-count{
  font-size:13px; font-weight:600; letter-spacing:.16em; color:var(--aplb-accent-2);
  font-variant-numeric:tabular-nums; min-width:64px;
}
.aplb-title{
  flex:1; min-width:0; font-size:14px; color:rgba(237,237,235,.72);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Botones redondos */
.aplb-btn{
  width:48px; height:48px; flex:0 0 48px; padding:0; margin:0;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  color:#EDEDEB; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.aplb-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.aplb-btn:hover, .aplb-btn:focus-visible{ background:var(--aplb-accent); border-color:var(--aplb-accent); color:#1a1919; }
.aplb-btn:focus-visible{ outline:2px solid var(--aplb-accent-2); outline-offset:3px; }
.aplb-close:hover{ transform:rotate(90deg); }
.aplb-btn[hidden]{ display:none; }

/* Escenario: la imagen va sobre una "tarjeta" clara para que los equipos negros se vean */
.aplb-stage{
  position:relative; z-index:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  margin:0 96px; overflow:hidden; touch-action:none;
}
.aplb-img{
  display:block; max-width:none; margin:0; user-select:none; -webkit-user-drag:none;
  background:#F4F3F0; border-radius:16px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.8);
  cursor:zoom-in; will-change:transform;
  transition:transform .4s var(--aplb-ease);
}
.aplb-img.is-zoomed{ transform:scale(2.2); cursor:zoom-out; }
.aplb.is-dragging .aplb-img{ transition:none; }

/* Flechas laterales */
.aplb-nav{
  position:absolute; top:50%; z-index:2; margin-top:-24px;
  opacity:0; transition:opacity .35s ease .2s, transform .5s var(--aplb-ease) .2s, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.aplb-prev{ left:24px; transform:translateX(-12px); }
.aplb-next{ right:24px; transform:translateX(12px); }
.aplb.is-open .aplb-nav{ opacity:1; transform:none; }
.aplb.is-zoomed .aplb-nav{ opacity:0; pointer-events:none; }

/* Miniaturas */
.aplb-thumbs{
  position:relative; z-index:2; display:flex; justify-content:center; gap:10px;
  padding:14px 20px 22px; overflow-x:auto; scrollbar-width:none;
  opacity:0; transform:translateY(16px);
  transition:opacity .4s ease .16s, transform .55s var(--aplb-ease) .16s;
}
.aplb-thumbs::-webkit-scrollbar{ display:none; }
.aplb-thumbs[hidden]{ display:none; }
.aplb-thumb{
  flex:0 0 auto; width:64px; height:64px; padding:0; margin:0;
  border-radius:12px; overflow:hidden; cursor:pointer;
  background:#F4F3F0; border:0; outline:2px solid transparent; outline-offset:3px;
  opacity:.45; transform:scale(.94);
  transition:opacity .25s ease, transform .35s var(--aplb-ease), outline-color .25s ease;
}
.aplb-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.aplb-thumb:hover{ opacity:.85; transform:none; }
.aplb-thumb.is-active{ opacity:1; transform:none; outline-color:var(--aplb-accent); }
.aplb-thumb:focus-visible{ outline-color:var(--aplb-accent-2); }

.aplb.is-open .aplb-top,
.aplb.is-open .aplb-thumbs{ opacity:1; transform:none; }
.aplb.is-closing .aplb-top,
.aplb.is-closing .aplb-thumbs,
.aplb.is-closing .aplb-nav{ opacity:0; transition-delay:0s; transition-duration:.2s; }
.aplb.is-zoomed .aplb-thumbs{ opacity:.25; }

/* Celular */
@media (max-width:760px){
  .aplb-stage{ margin:0 12px; }
  .aplb-nav{ display:none; }
  .aplb-top{ padding:12px 12px 6px; gap:12px; }
  .aplb-title{ font-size:13px; }
  .aplb-btn{ width:42px; height:42px; flex-basis:42px; }
  .aplb-thumbs{ justify-content:flex-start; gap:8px; padding:10px 12px 16px; }
  .aplb-thumb{ width:52px; height:52px; border-radius:10px; }
  .woocommerce-product-gallery .woocommerce-product-gallery__trigger{ right:37px !important; bottom:62px !important; width:42px !important; height:42px !important; }
}

@media (prefers-reduced-motion:reduce){
  .aplb *, .aplb-bg{ transition:none !important; }
}