/* ============================================================
   Overlay full-screen para el popup de tienda (diseño propio CRT).
   La estructura interna usa .cr (estilado dentro del template).
   ============================================================ */
#spo-shop-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; /* el JS lo ajusta a la altura del header al abrir */
  z-index: 9990;
}
/* Cuando el popup del carrito (#cpo-overlay) está abierto, debe quedar por encima */
body:has(#cpo-overlay.cpo-open) #spo-shop-overlay { z-index: 8000; }
#cpo-overlay.cpo-open { z-index: 2147483000 !important; }

/* === Xoo WooCommerce Side Cart: debe quedar SIEMPRE por encima de cualquier popup === */
.xoo-wsc-basket            { z-index: 2147483646 !important; } /* ícono flotante */
.xoo-wsc-container,
.xoo-wsc-slider            { z-index: 2147483645 !important; } /* panel del carrito */
.xoo-wsc-cart-active .xoo-wsc-opac { z-index: 2147483644 !important; } /* fondo oscuro */
/* No oscurecer la pantalla: ocultar los fondos oscuros de ambos carritos */
.xoo-wsc-cart-active .xoo-wsc-opac { background: transparent !important; opacity: 0 !important; }
#cpo-backdrop { background: transparent !important; }
/* Mientras el Xoo está abierto, bajar los popups para que no compitan */
body.xoo-wsc-cart-active #spo-shop-overlay,
body.xoo-wsc-cart-active #cpo-overlay { z-index: 8000 !important; }
/* Mientras el popup del buscador está abierto, los otros popups quedan DETRÁS */
body.crfs-modal-open #spo-shop-overlay,
body.crfs-modal-open #cpo-overlay { z-index: 7000 !important; }

#spo-shop-overlay.spo-shop-hidden { display: none; }

#spo-shop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 53, 120, 0.5);
}

#spo-shop-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #f4f6f9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: spo-shop-fade 0.22s ease;
}
@keyframes spo-shop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#spo-shop-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Que el bloque .cr ocupe bien dentro del popup */
#spo-shop-body .cr { min-height: 100%; }