/* ===== MODAL FIX GLOBAL — aplica a todas las categorías ===== */

/* Modal overlay */
.modal-overlay{
  position:fixed!important;inset:0!important;
  background:rgba(16,42,99,.58)!important;
  backdrop-filter:blur(5px)!important;
  z-index:10000!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
}
.modal-overlay.show{display:flex!important;}

/* Modal box — tamaño correcto, no se sale */
.product-detail-modal{
  background:#fff!important;
  border-radius:32px!important;
  padding:28px!important;
  width:min(920px,94vw)!important;
  max-width:94vw!important;
  max-height:92vh!important;
  overflow:auto!important;
  overflow-x:hidden!important;
  box-shadow:0 25px 80px rgba(16,42,99,.28)!important;
  position:relative!important;
  box-sizing:border-box!important;
}

/* Grid 2 columnas en desktop */
.product-detail-grid{
  display:grid!important;
  grid-template-columns:1fr 1.1fr!important;
  gap:32px!important;
  align-items:start!important;
  min-width:0!important;
}

/* Imagen principal */
.detail-image{
  background:linear-gradient(180deg,#f5f9ff,#eef4ff)!important;
  border:1px solid #d8e5fb!important;
  border-radius:26px!important;
  padding:24px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:16px!important;
  min-width:0!important;
}
#modalProductImage{
  width:100%!important;
  height:300px!important;
  object-fit:contain!important;
  background:#fff!important;
  border-radius:20px!important;
  padding:14px!important;
  max-height:300px!important;
}

/* Galería miniaturas */
.detail-gallery-wrap{position:relative!important;width:100%!important;padding:0 48px!important;}
.detail-gallery{
  display:flex!important;gap:10px!important;
  overflow-x:auto!important;scroll-behavior:smooth!important;
  padding:4px 0 8px!important;scrollbar-width:none!important;min-height:82px!important;
}
.detail-gallery::-webkit-scrollbar{display:none!important;}
.detail-gallery button{
  flex:0 0 70px!important;width:70px!important;height:70px!important;
  border-radius:14px!important;border:2px solid #d8e5fb!important;
  background:#fff!important;padding:5px!important;cursor:pointer!important;
  transition:.18s!important;
}
.detail-gallery button.active{
  border-color:#2048a0!important;
  box-shadow:0 0 0 3px rgba(32,72,160,.12)!important;
  transform:translateY(-2px)!important;
}
.detail-gallery img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:10px!important;}
.detail-gallery-nav{
  position:absolute!important;top:50%!important;transform:translateY(-50%)!important;
  width:38px!important;height:38px!important;border:0!important;border-radius:999px!important;
  background:#fff!important;color:#2048a0!important;
  font:900 24px/1 Poppins,Arial!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;z-index:4!important;
  box-shadow:0 6px 18px rgba(14,47,120,.13)!important;
}
.detail-gallery-nav.prev{left:0!important;}
.detail-gallery-nav.next{right:0!important;}

/* Botón zoom */
.detail-image-zoom-btn{
  align-self:flex-start!important;
  display:flex!important;align-items:center!important;gap:6px!important;
  border:1px solid #d8e5fb!important;background:#fff!important;color:#2048a0!important;
  border-radius:999px!important;padding:7px 14px!important;
  font:800 12px Poppins,Arial!important;cursor:pointer!important;
}

/* Recomendados */
.modal-side-extra{width:100%!important;margin-top:14px!important;}
.recommend-box{
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
  border:1px solid #d8e5fb!important;border-radius:20px!important;padding:14px!important;
}
.recommend-title{
  margin:0 0 10px!important;color:#102a63!important;
  font-size:.95rem!important;font-weight:900!important;
  display:flex!important;align-items:center!important;gap:6px!important;
}
.recommend-title::before{content:"✨"!important;}
.recommend-grid{
  display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:8px!important;max-height:280px!important;overflow-y:auto!important;
}
.recommend-card{
  display:flex!important;align-items:center!important;gap:8px!important;
  width:100%!important;text-align:left!important;
  border:1px solid #dbe6f8!important;background:#fff!important;
  border-radius:14px!important;padding:8px!important;
  cursor:pointer!important;transition:.18s!important;min-height:80px!important;
}
.recommend-card:hover{transform:translateY(-2px)!important;box-shadow:0 10px 22px rgba(16,42,99,.09)!important;}
.recommend-card img{
  width:58px!important;height:58px!important;object-fit:contain!important;
  background:#f8fbff!important;border-radius:12px!important;
  padding:5px!important;flex:0 0 58px!important;
}
.recommend-card .rc-name{display:block!important;color:#102a63!important;font-size:.82rem!important;font-weight:800!important;line-height:1.2!important;margin-bottom:2px!important;}
.recommend-card .rc-meta{display:block!important;color:#6a7ca7!important;font-size:.7rem!important;margin-bottom:2px!important;}
.recommend-card .rc-price{display:block!important;color:#2048a0!important;font-size:.85rem!important;font-weight:900!important;}

/* Info derecha — overflow:visible para que el contenido no quede oculto */
.detail-info{min-width:0!important;overflow:visible!important;}
.detail-tags{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-bottom:10px!important;}
.detail-tags span{
  display:inline-flex!important;align-items:center!important;
  padding:5px 12px!important;border-radius:999px!important;
  border:1px solid #cfe0fb!important;background:#eef5ff!important;
  color:#2048a0!important;font-size:12px!important;font-weight:700!important;
}
.detail-info h2{
  font-size:clamp(22px,3vw,38px)!important;color:#102a63!important;
  line-height:1.05!important;margin:10px 0 10px!important;
  font-weight:900!important;word-break:break-word!important;
  overflow-wrap:break-word!important;
}
.detail-lead-copy{color:#647396!important;font-size:15px!important;line-height:1.6!important;margin:0 0 14px!important;}
.detail-price{
  display:block!important;color:#2048a0!important;
  font-size:38px!important;font-weight:900!important;margin:0 0 12px!important;
}
.detail-meta-row{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important;margin:0 0 16px!important;}
.detail-sku{
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  padding:6px 12px!important;border-radius:999px!important;
  background:#eef5ff!important;border:1px solid #d7e5fb!important;
  color:#2048a0!important;font-weight:800!important;font-size:.84rem!important;
}
.detail-sku::before{
  content:"SKU"!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  padding:2px 7px!important;border-radius:999px!important;
  background:#dce9ff!important;color:#163b8c!important;
  font-size:.7rem!important;font-weight:900!important;
}

/* Opciones cantidad/talla/color */
.detail-options{
  display:grid!important;
  grid-template-columns:90px 1fr 1fr!important;
  gap:12px!important;margin:0 0 16px!important;align-items:end!important;
}
.detail-options label>span{
  display:block!important;text-transform:uppercase!important;
  color:#2048a0!important;font-size:11px!important;font-weight:900!important;margin-bottom:7px!important;
}
.detail-options input,.detail-options select{
  width:100%!important;border:1px solid #d8e5fb!important;
  border-radius:14px!important;min-height:50px!important;
  padding:0 12px!important;font:700 13px Poppins,Arial!important;
  color:#102a63!important;background:#fbfdff!important;
  height:auto!important;box-sizing:border-box!important;
}

/* Botones acción */
.detail-actions{display:flex!important;flex-direction:column!important;gap:10px!important;}

/* Confirmar carrito */
.btn-confirm,
button#confirmAddToCart{
  width:100%!important;min-height:56px!important;border:0!important;
  border-radius:16px!important;background:#2048a0!important;color:#fff!important;
  font:900 16px Poppins,Arial!important;cursor:pointer!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.btn-confirm:hover,button#confirmAddToCart:hover{background:#1a3d8a!important;}

/* Mesa de regalo modal */
.btn-gift-modal,
button[data-add-gift-draft="modal"]{
  width:100%!important;min-height:52px!important;
  border:2px solid #f0b400!important;border-radius:16px!important;
  background:#ffd24a!important;color:#102a63!important;
  font:900 15px Poppins,Arial!important;cursor:pointer!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:8px!important;
}
.btn-gift-modal:hover{background:#fbc530!important;}

/* WhatsApp */
.btn-wa,button#modalWhatsappBtn{
  width:100%!important;min-height:52px!important;border:0!important;
  border-radius:16px!important;background:#22c55e!important;color:#fff!important;
  font:900 15px Poppins,Arial!important;cursor:pointer!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
}
.btn-wa:hover{background:#16a34a!important;}
.btn-wa img{width:20px!important;height:20px!important;filter:brightness(0) invert(1)!important;}

/* Nota pago flexible */
.detail-wompi-note{
  font-size:12px!important;color:#6b7aa0!important;
  background:#f4f8ff!important;border:1px solid #d8e5fb!important;
  border-radius:12px!important;padding:12px!important;
  margin-top:4px!important;line-height:1.55!important;
}

/* Botón cerrar modal */
.modal-close{
  position:absolute!important;top:14px!important;right:14px!important;
  border:0!important;background:#e7f0ff!important;color:#2048a0!important;
  width:42px!important;height:42px!important;border-radius:50%!important;
  font-size:22px!important;font-weight:900!important;cursor:pointer!important;z-index:2!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}

/* Color swatches */
.visually-hidden-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;}
.color-swatch-group{display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding:4px 0!important;min-height:50px!important;align-items:center!important;}
.color-swatch-btn{
  width:26px!important;height:26px!important;border-radius:50%!important;
  border:2px solid #d7e2fb!important;background:var(--swatch-bg,#dbeafe)!important;
  cursor:pointer!important;transition:.18s!important;flex:none!important;
}
.color-swatch-btn.active{border-color:#2048a0!important;box-shadow:0 0 0 3px rgba(32,72,160,.15)!important;}

/* === RESPONSIVE === */
@media(max-width:860px){
  .product-detail-grid{grid-template-columns:1fr!important;}
  #modalProductImage{height:240px!important;}
  .recommend-grid{grid-template-columns:1fr!important;}
  .detail-options{grid-template-columns:1fr!important;}
  .product-detail-modal{padding:20px!important;border-radius:24px!important;}
}
@media(max-width:580px){
  .product-detail-modal{padding:14px!important;border-radius:20px!important;width:96vw!important;}
  .detail-info h2{font-size:22px!important;}
  .detail-price{font-size:32px!important;}
  .detail-gallery-wrap{padding:0 36px!important;}
  .detail-gallery button{flex:0 0 60px!important;width:60px!important;height:60px!important;}
}