/* Implementación canónica: #productModal es el único scroll vertical. */
body.modal-open{overscroll-behavior:none}
body.modal-open .social-side,
body.modal-open .social-floating,
body.modal-open .floating-wa{visibility:hidden;pointer-events:none}

#productModal,
#productModal *,
#productModal *::before,
#productModal *::after{box-sizing:border-box}

#productModal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  width:100%;
  height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  align-items:flex-start;
  justify-content:center;
  padding:18px;
  padding-top:max(18px,env(safe-area-inset-top,0px));
  padding-bottom:max(18px,env(safe-area-inset-bottom,0px));
  background:rgba(8,10,14,.78);
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
@supports (height:100dvh){#productModal{height:100dvh}}
#productModal.open{display:flex}

#productModal .product-modal-card{
  position:relative;
  flex:0 0 auto;
  width:min(1120px,100%);
  height:auto;
  min-width:0;
  margin-block:auto;
  overflow:visible;
  border:1px solid rgba(15,23,42,.12);
  border-radius:28px;
  background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}
#productModal .product-modal-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  align-items:stretch;
  min-width:0;
}
#productModal .product-modal-close{
  position:absolute;
  top:calc(12px + var(--modal-scroll-top,0px));
  right:12px;
  z-index:12;
  display:grid;
  width:46px;
  height:46px;
  padding:0;
  place-items:center;
  border:2px solid rgba(255,255,255,.88);
  border-radius:50%;
  background:rgba(17,17,17,.92);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  font:800 29px/1 Arial,sans-serif;
  cursor:pointer;
  transition:transform .18s ease,background-color .18s ease;
}
#productModal .product-modal-close:hover{transform:scale(1.05);background:#c91422}
#productModal .product-modal-close:focus-visible,
#productModal .product-gallery-arrow:focus-visible,
#productModal .product-modal-main-image:focus-visible,
#productModal .product-gallery-thumb:focus-visible,
#productModal .product-modal-buy:focus-visible,
#productModal .product-modal-back:focus-visible,
#productModal .product-variant-button:focus-visible{outline:3px solid #0877ff;outline-offset:3px}

#productModal .product-modal-gallery{
  display:grid;
  min-width:0;
  align-content:start;
  gap:12px;
  padding:28px 24px 24px;
  overflow:visible;
  border-radius:27px 0 0 27px;
  background:linear-gradient(155deg,#f8fafc 0%,#eef2f6 100%);
  touch-action:pan-y;
}
#productModal .product-modal-main-image{
  position:relative;
  display:grid;
  min-width:0;
  min-height:clamp(390px,45vh,510px);
  place-items:center;
  overflow:hidden;
  border-radius:20px;
  background:rgba(255,255,255,.78);
  touch-action:pan-y;
}
#productModal[data-product-id="jbl-charge6"] .product-modal-main-image,
#productModal[data-product-id="jbl-partybox130"] .product-modal-main-image,
#productModal[data-product-id="jbl-partybox330"] .product-modal-main-image,
#productModal[data-product-id="jbl-boombox4"] .product-modal-main-image,
#productModal[data-product-id="jbl-xtreme5"] .product-modal-main-image{
  width:100%;
  max-width:100%;
}
#productModal .product-modal-main-image #modalImg{
  display:block;
  width:100%;
  height:auto;
  max-height:clamp(350px,42vh,480px);
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.14));
  transition:opacity .22s ease;
}
#productModal .product-modal-main-image #modalImg.is-out-of-stock-image,
#productModal .product-gallery-thumb img.is-out-of-stock-image{
  opacity:.38;
}
#productModal .product-gallery-arrow{
  position:absolute;
  top:50%;
  z-index:4;
  display:grid;
  width:44px;
  height:44px;
  padding:0;
  place-items:center;
  transform:translateY(-50%);
  border:0;
  border-radius:50%;
  background:rgba(17,17,17,.86);
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
  font:800 31px/1 Arial,sans-serif;
  cursor:pointer;
}
#productModal .product-gallery-prev{left:12px}
#productModal .product-gallery-next{right:12px}
#productModal .product-gallery-meta{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#4b5563;
  font-size:.82rem;
  font-weight:750;
}
#productModal .product-gallery-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#productModal .product-gallery-position{
  flex:none;
  padding:5px 9px;
  border-radius:999px;
  background:#fff;
  color:#111827;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
  font-variant-numeric:tabular-nums;
}
#productModal .product-thumbnails{
  display:grid;
  grid-auto-columns:82px;
  grid-auto-flow:column;
  gap:9px;
  min-width:0;
  padding:3px 3px 8px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
}
#productModal .product-gallery-thumb{
  display:grid;
  grid-template-rows:62px auto;
  gap:5px;
  width:82px;
  min-width:0;
  padding:5px;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:12px;
  background:rgba(255,255,255,.9);
  color:#4b5563;
  font:700 10px/1.2 Inter,Arial,sans-serif;
  cursor:pointer;
}
#productModal .product-gallery-thumb img{display:block;width:100%;height:62px;object-fit:contain;border-radius:7px;transition:opacity .22s ease}
#productModal .product-gallery-thumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#productModal .product-gallery-thumb.active{border-color:#0877ff;color:#0757b7;box-shadow:0 0 0 2px rgba(8,119,255,.12)}

#productModal .product-modal-info{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  padding:46px 42px 38px;
  overflow:visible;
}
#productModal .product-modal-brand{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin:0 54px 13px 0;
  padding:7px 11px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
#productModal .product-modal-title{
  margin:0 48px 10px 0;
  color:#111827;
  font-size:clamp(2rem,3vw,2.75rem);
  font-weight:950;
  letter-spacing:-.045em;
  line-height:1.02;
}
#productModal .product-modal-copy{margin:0 0 20px;color:#525866;font-size:.98rem;line-height:1.58}
#productModal .product-price--catalog{display:block;width:100%;margin:0 0 20px;color:inherit;text-align:left}
#productModal .product-price--catalog .product-price-display{gap:7px}
#productModal .product-price--catalog .product-offer-price{font-size:clamp(2.35rem,4vw,3.2rem)!important}
#productModal .product-price--catalog .product-discount-badge{min-height:31px;padding:6px 10px;font-size:.84rem!important}
#productModal .product-price--catalog .product-regular-price{font-size:.92rem!important}
#productModal .product-modal-features{
  display:grid;
  width:100%;
  gap:9px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
  color:#2f3540;
}
#productModal .product-modal-features li{position:relative;padding-left:25px;line-height:1.45}
#productModal .product-modal-features li::before{position:absolute;top:0;left:0;color:#00873c;content:"✓";font-weight:950}

#productModal .product-modal-variant-selector{width:100%;margin:0 0 18px;padding:0;border:0}
#productModal .product-modal-variant-selector>legend{margin-bottom:9px;padding:0;color:#343a46;font-size:.82rem;font-weight:850}
#productModal .product-variant-buttons{display:flex;flex-wrap:wrap;gap:8px}
#productModal .product-variant-button{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid #cdd3dc;
  border-radius:12px;
  background:#fff;
  color:#222833;
  font:800 .78rem/1.15 Inter,Arial,sans-serif;
  cursor:pointer;
}
#productModal .product-variant-button i{
  position:relative;
  display:block;
  width:18px;
  height:18px;
  flex:none;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--variant-color,#111);
  box-shadow:0 0 0 1px #aab1bc;
}
#productModal .product-variant-button.active,
#productModal .product-variant-button[aria-pressed="true"]{border-color:#0877ff;background:#edf6ff;color:#0757b7;box-shadow:0 0 0 2px rgba(8,119,255,.1)}
#productModal .product-variant-button.is-out-of-stock{border-color:rgba(143,24,32,.22);background:transparent;color:#777;box-shadow:none;opacity:.46}
#productModal .product-variant-button.is-out-of-stock i::after{
  position:absolute;
  inset:7px -3px auto;
  height:2px;
  transform:rotate(-45deg);
  background:#c91422;
  content:"";
}
#productModal .product-variant-button small{padding:3px 6px;border-radius:999px;background:#f8edf1;color:#8e2344;font-size:.66rem;font-weight:900}
#productModal .product-variant-button.is-out-of-stock small{border:1px solid rgba(161,14,26,.24);background:transparent;color:#a10e1a}
#productModal .product-modal-actions{
  display:grid;
  width:100%;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:10px;
  margin-top:auto;
}
#productModal .product-modal-detail-note{margin:0;color:#626975;font-size:.8rem;line-height:1.5}
#productModal .product-modal-detail-note[hidden]{display:none}
#productModal .product-modal-buy,
#productModal .product-modal-back{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  padding:13px 15px;
  border:0;
  border-radius:14px;
  text-align:center;
  text-decoration:none;
  font-size:.9rem;
  font-weight:900;
  cursor:pointer;
}
#productModal .product-modal-buy{background:#20b95b;color:#fff;box-shadow:0 10px 22px rgba(32,185,91,.22)}
#productModal .product-modal-buy:hover{background:#159a48}
#productModal .product-modal-buy:disabled{background:#d9dde3;color:#626975;box-shadow:none;cursor:not-allowed}
#productModal .product-modal-back{background:#17191d;color:#fff}
#productModal .product-modal-back:hover{background:#30343a}

#productModal .product-gallery-arrow[hidden],
#productModal .product-gallery-position[hidden],
#productModal .product-thumbnails[hidden],
#productModal .product-modal-variant-selector[hidden]{display:none}

@media (max-width:900px){
  #productModal .product-modal-card{width:min(660px,100%);margin-block:0;border-radius:22px}
  #productModal .product-modal-layout{grid-template-columns:minmax(0,1fr)}
  #productModal .product-modal-gallery{padding:16px 14px 14px;border-radius:21px 21px 0 0}
  #productModal .product-modal-main-image{min-height:300px;aspect-ratio:4/3}
  #productModal .product-modal-main-image #modalImg{max-height:320px}
  #productModal .product-modal-info{padding:24px 22px 30px}
}
@media (max-width:620px){
  #productModal{
    padding:8px;
    padding-top:max(12px,env(safe-area-inset-top,0px));
    padding-bottom:max(18px,env(safe-area-inset-bottom,0px));
  }
  #productModal .product-modal-card{width:100%;border-radius:20px}
  #productModal .product-modal-close{top:calc(10px + var(--modal-scroll-top,0px));right:10px;width:43px;height:43px;font-size:27px}
  #productModal .product-modal-gallery{gap:9px;padding:12px 10px 11px;border-radius:19px 19px 0 0}
  #productModal .product-modal-main-image{min-height:250px;aspect-ratio:4/3;border-radius:15px}
  #productModal .product-modal-main-image #modalImg{max-height:270px}
  #productModal .product-gallery-arrow{width:39px;height:39px;font-size:27px}
  #productModal .product-gallery-prev{left:8px}
  #productModal .product-gallery-next{right:8px}
  #productModal .product-thumbnails{grid-auto-columns:72px;gap:7px}
  #productModal .product-gallery-thumb{width:72px;grid-template-rows:54px auto}
  #productModal .product-gallery-thumb img{height:54px}
  #productModal .product-modal-info{padding:22px 18px 28px}
  #productModal .product-modal-brand{margin-right:46px}
  #productModal .product-modal-title{margin-right:0;font-size:clamp(1.75rem,9vw,2.15rem)}
  #productModal .product-modal-copy{font-size:.93rem}
  #productModal .product-price--catalog .product-offer-price{font-size:clamp(2.25rem,12vw,2.85rem)!important}
  #productModal .product-modal-actions{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:901px) and (max-height:800px){
  #productModal{padding-block:12px}
  #productModal .product-modal-main-image{min-height:330px}
  #productModal .product-modal-main-image #modalImg{max-height:310px}
  #productModal .product-modal-gallery{padding-block:20px}
  #productModal .product-modal-info{padding-block:30px}
}
@media (prefers-reduced-motion:reduce){
  #productModal .product-modal-close,
  #productModal .product-modal-main-image #modalImg{transition:none}
}