/**
 * Shell SSR del showcase: layout + primera imagen en el HTML (antes de React).
 * Debe coincidir con gallery/grid mobile para minimizar CLS al hidratar.
 */

.col-md-7.col-product-image {
  padding: 0 !important;
}

.fbg-productshowcase-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* React monta en paralelo; oculto hasta is-hydrated (SSR sigue visible → sin pestañeo) */
.fbg-productshowcase-wrapper:not(.is-hydrated) .fbg-ps-react-root {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.fbg-productshowcase-wrapper.is-hydrated .fbg-ps-ssr {
  display: none !important;
}

.fbg-productshowcase-wrapper.is-hydrated .fbg-ps-react-root {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.fbg-ps-ssr {
  width: 100%;
  max-width: 100%;
  margin-bottom: 50px;
  box-sizing: border-box;
}

/* —— Gallery —— */
.fbg-ps-ssr--gallery {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  --fbg-ps-ssr-main-max-h: min(72vh, 700px);
  --fbg-ps-ssr-ar: 500 / 678;
}

.fbg-ps-ssr__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 84px;
  max-height: var(--fbg-ps-ssr-main-max-h);
  overflow: hidden;
}

.fbg-ps-ssr__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #ececec;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

.fbg-ps-ssr__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fbg-ps-ssr__main {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-height: var(--fbg-ps-ssr-main-max-h);
  aspect-ratio: var(--fbg-ps-ssr-ar);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fcfcfc;
  line-height: 0;
  overflow: hidden;
}

.fbg-ps-ssr__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fbg-ps-ssr__mobile-thumbs {
  display: none;
}

@media (max-width: 767px) {
  .fbg-ps-ssr--gallery {
    flex-direction: column;
    --fbg-ps-ssr-main-max-h: 80vh;
  }

  .fbg-ps-ssr__thumbs {
    display: none;
  }

  .fbg-ps-ssr__main {
    background: #fcfcfc;
  }

  .fbg-ps-ssr__mobile-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 0;
    padding: 10px 0 4px;
    min-height: 88px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .fbg-ps-ssr__mobile-thumbs .fbg-ps-ssr__thumb {
    /* 4 visibles aprox., como ThumbStrip */
    flex: 0 0 calc((100% - 24px) / 4);
    width: auto;
  }
}

/* —— Grid —— */
.fbg-ps-ssr--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fbg-ps-ssr--grid .fbg-ps-ssr__cell {
  background: #fcfcfc;
  line-height: 0;
  overflow: hidden;
  aspect-ratio: var(--fbg-ps-ssr-ar, 500 / 678);
}

.fbg-ps-ssr--grid .fbg-ps-ssr__cell img {
  width: 100%;
  height: 100%;
  /* contain, igual que el grid hidratado: la proporción de la celda viene
     del tipo de imagen de PrestaShop (la caja), no del archivo real, así
     que con cover las fotos más altas se veían cortadas ya en el primer
     render, antes de hidratar. */
  object-fit: contain;
  display: block;
}

.fbg-ps-ssr--grid .fbg-ps-ssr__cell--span {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .fbg-ps-ssr--grid {
    grid-template-columns: 1fr;
  }

  .fbg-ps-ssr--grid .fbg-ps-ssr__cell--span {
    grid-column: auto;
  }
}