/* =========================================================
   PDP Gallery (Columna 1) — compacto (menos alto)
   + sin hover/zoom
   + sin azul Astra
   + paginación móvil overlay dentro de la imagen
   ========================================================= */

.c-pdp-gallery{
  width:100%;
}

/* Card principal */
.c-pdp-gallery__main{
  margin:0;
  background:#f3f5f7;
  border-radius:8px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:center;

  /* ✅ MENOS ALTO (antes 520) */
  min-height:470px;

  overflow:hidden;
  position:relative;
}

.c-pdp-gallery__img{
  width:100%;
  height:100% !important;

  /* ✅ MENOS ALTO (antes 520) */
  max-height:470px;

  object-fit:contain;
  display:block;
}

/* ✅ Pagination (por defecto oculta fuera móvil) */
.c-pdp-gallery__pagination{
  display:none;
}

/* Thumbs debajo (desktop/tablet) */
.c-pdp-gallery__thumbs{
  list-style:none;
  margin:12px 0 0 0;
  padding:0;
  display:flex;
  gap:12px;
}

.c-pdp-gallery__thumbItem{ flex:0 0 auto; }

/* ✅ Botones de thumbs SIN estilo azul del tema */
.c-pdp-gallery__thumbBtn{
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;

  /* ✅ un poco menos de padding */
  padding:8px;

  background:#f3f5f7 !important;
  border-radius:8px;
  cursor:pointer;
  display:grid;
  place-items:center;

  /* ✅ MISMO ANCHO, MENOS ALTO */
  width:92px;
  height:92px;

  -webkit-tap-highlight-color: transparent;
}

.c-pdp-gallery__thumbBtn:hover,
.c-pdp-gallery__thumbBtn:focus,
.c-pdp-gallery__thumbBtn:active,
.c-pdp-gallery__thumbBtn:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  background:#f3f5f7 !important;
  transform:none !important;
  filter:none !important;
}

/* ✅ Solo el activo tiene borde verde */
.c-pdp-gallery__thumbBtn.is-active{
  outline:2px solid rgba(16,185,129,.55) !important;
  outline-offset:0;
  box-shadow:none !important;
}

.c-pdp-gallery__thumbImg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

/* ===========================
   ✅ Mobile (menos alto + dots dentro)
   =========================== */
@media (max-width: 767.98px){

  .c-pdp-gallery__main{
    width:100%;
    padding:10px;
    border-radius:8px;

    /* ✅ MENOS ALTO (antes 420) */
    min-height:370px;
  }

  .c-pdp-gallery__img{
    width:100%;

    /* ✅ MENOS ALTO (antes 420) */
    max-height:370px;
  }

  /* ✅ Ocultamos thumbs en móvil */
  .c-pdp-gallery__thumbs{
    display:none !important;
  }

  /* ✅ Pagination dentro del figure (overlay abajo) */
  .c-pdp-gallery__pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    position:absolute;
    left:0;
    right:0;
    bottom:10px;

    padding:6px 10px;
    width:fit-content;
    margin:0 auto;

    border-radius:9999px;
    background:rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    z-index:2;
    pointer-events:auto;
  }

  .c-pdp-gallery__dot{
    width:8px;
    height:8px;
    border-radius:9999px;
    border:0 !important;
    padding:0 !important;
    cursor:pointer;

    background: rgba(0,0,0,.22) !important;

    outline:none !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .c-pdp-gallery__dot.is-active{
    background: rgba(0,0,0,.55) !important;
  }

  .c-pdp-gallery__dot:hover,
  .c-pdp-gallery__dot:focus,
  .c-pdp-gallery__dot:active,
  .c-pdp-gallery__dot:focus-visible{
    outline:none !important;
    box-shadow:none !important;
    filter:none !important;
  }
}