/* ── Body lock cuando el modal está abierto ────────────────────────────────── */
/* Evita que la página de fondo se desplace mientras el modal está visible.     */
/* --modal-scrollbar-width se calcula desde JS para compensar el espacio         */
/* que deja el scrollbar al ocultarse y evitar el layout shift del slider.      */

body.modal-open {
  overflow: hidden;
  padding-right: var(--modal-scrollbar-width, 0px);
}

/* ── Capa exterior (solo fondo, sin scroll) ────────────────────────────────── */
/* overflow: hidden aquí es clave: el scroll NO lo maneja esta capa,            */
/* así el botón X con position:absolute nunca queda tapado ni atrapado.         */

.custom-modal-fullScreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
}

.custom-modal-fullScreen.active {
  display: flex;
  flex-direction: column;
}

/* ── Zona de scroll (capa interior) ───────────────────────────────────────── */
/* overscroll-behavior:contain evita que el scroll "se escape" a la página.    */
/* scrollbar-gutter:stable reserva espacio fijo para el scrollbar, así el      */
/* slider full-width no se desplaza cuando el scrollbar aparece/desaparece.    */

.modal-scroll-area {
  position: relative;
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  width: 100%;
}

/* ── Contenido interior ────────────────────────────────────────────────────── */

.custom-modal-fullScreen-content {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding: 80px 20px 60px;
  box-sizing: border-box;
}

#modal-fullScreen-content-inner {
  width: 100%;
}

/* ── Estado de carga ───────────────────────────────────────────────────────── */

.modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  font-size: 18px;
  color: #555;
}

/* ── Estado de error ───────────────────────────────────────────────────────── */

.modal-error {
  padding: 80px 20px;
  text-align: center;
  color: #c0392b;
  font-size: 16px;
}

/* ── Overrides de componentes Nectar dentro del modal ──────────────────────── */

#modal-fullScreen-content-inner
  .nectar-split-heading[data-animation-type="line-reveal-by-space"]:not(
    .markup-generated
  ) {
  opacity: 1;
  font-size: 44px;
  letter-spacing: -1.32px;
  line-height: 1;
  text-align: center;
}

/* Toggle panels */
#modal-fullScreen-content-inner .toggle .inner_content,
#modal-fullScreen-content-inner .nectar-toggle .inner_content {
  display: none;
}

#modal-fullScreen-content-inner .toggle.active .inner_content,
#modal-fullScreen-content-inner .nectar-toggle.active .inner_content {
  display: block;
}

/* Carousel / slider */
#modal-fullScreen-content-inner .custom-slider-products-card img {
  height: 370px;
  max-width: 518px;
  width: 100%;
  min-width: 300px;
  object-fit: cover;
  object-position: center;
}

#modal-fullScreen-content-inner
  .nectar-flickity.nectar-carousel[data-format="default"]
  .flickity-slider
  .cell {
  padding: 0;
}

#modal-fullScreen-content-inner .flickity-viewport {
  width: 100% !important;
}

#modal-fullScreen-content-inner .vc_row-inner.full-width-content,
#modal-fullScreen-content-inner .row-column-wrap.full-width-content {
  width: 100% !important;
  left: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

#modal-fullScreen-content-inner .flickity-viewport {
  overflow: hidden;
  width: 100% !important;
}

/* --- Desktop (3 completas + 2 fragmentos) --- */
@media only screen and (min-width: 1001px) {
  #modal-fullScreen-content-inner .nectar-flickity .cell {
    width: 28% !important; /* Aproximadamente 3.5 cards visibles */
    margin-right: 20px !important;
  }
}

/* --- Tablet (2 completas + 2 fragmentos) --- */
@media only screen and (max-width: 1000px) and (min-width: 691px) {
  #modal-fullScreen-content-inner .nectar-flickity .cell {
    width: 40% !important; /* Aproximadamente 2.5 cards visibles */
    margin-right: 15px !important;
  }
}

/* --- Mobile (1 completa + 2 fragmentos laterales) --- */
@media only screen and (max-width: 690px) {
  #modal-fullScreen-content-inner .nectar-flickity .cell {
    width: 80% !important; /* 1 card principal y asoman las de los lados */
    margin-right: 10px !important;
  }
}

/* Anular el "estiramiento" automático de Salient que rompe el centrado */
#modal-fullScreen-content-inner .vc_row-inner.full-width-content,
#modal-fullScreen-content-inner .row-column-wrap.full-width-content {
  left: 0 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}