/* ===== Galería WooCommerce: miniaturas a la IZQUIERDA + flechas ===== */
.woocommerce div.product div.images{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

/* Columna de miniaturas (la lista UL) */
.woocommerce div.product div.images .flex-control-thumbs{
  order:0;
  width:90px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0!important;
  padding:0!important;
  list-style:none;
  max-height:420px;          /* ≈ 4 thumbs visibles */
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#ccc transparent;
}

/* Miniaturas */
.woocommerce div.product div.images .flex-control-thumbs li{
  width:100%!important;
  margin:0!important;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;
  opacity:.9;
  border:2px solid transparent;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  transition:opacity .2s ease, border-color .2s ease, transform .1s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover{opacity:1; transform:translateY(-1px);}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{
  opacity:1; border-color:#f5b300;
}

/* Imagen principal */
.woocommerce div.product div.images .flex-viewport{
  order:1;
  width:calc(100% - 110px);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  width:100%; height:auto; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Flechas (se insertan por JS) */
.st-thumbs-rail{                /* wrapper que crea el JS */
  position:relative;
  width:90px;
}
.st-arrow{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:32px; height:32px;
  border-radius:999px;
  border:0;
  background:#ffffffee;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  cursor:pointer;
  display:grid; place-items:center;
  font-size:16px; line-height:1;
  z-index:2;
}
.st-arrow svg{width:18px; height:18px}
.st-arrow--up{ top:-6px; }
.st-arrow--down{ bottom:-6px; }
.st-arrow[disabled]{opacity:.45; cursor:not-allowed}

/* Scrollbar WebKit */
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar{ width:6px; height:6px;}
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar-thumb{ background:#ccc; border-radius:10px; }
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar-track{ background:transparent; }

/* ===== Responsive: en móvil, miniaturas ABAJO en fila con flechas izquierda/derecha ===== */
@media (max-width:768px){
  .woocommerce div.product div.images{ flex-direction:column; }
  .woocommerce div.product div.images .flex-viewport{ width:100%; }

  .st-thumbs-rail{ width:100%; }
  .woocommerce div.product div.images .flex-control-thumbs{
    width:100%;
    flex-direction:row;
    max-height:none;
    overflow-y:hidden;
    overflow-x:auto;
  }
  .woocommerce div.product div.images .flex-control-thumbs li{
    width:80px!important; flex:0 0 auto;
  }

  .st-arrow{ top:50%; transform:translateY(-50%); }
  .st-arrow--up{ left:6px; right:auto; }     /* se usa como IZQUIERDA */
  .st-arrow--down{ right:6px; left:auto; }   /* se usa como DERECHA  */
}

.woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* Muestra hasta 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 2.5em;
    max-height: 2.5em; /* 2 líneas * 2.5em */
}

/* Oculta los textos "Previous / Next" en la galería de productos */
.single-product .woocommerce-product-gallery .flex-direction-nav,
.single-product div.product div.images .flex-direction-nav,
.single-product .flex-direction-nav,
.single-product .flex-direction-nav li,
.single-product .flex-direction-nav a{
  display: none !important;
}

/* Por si el tema los lista con viñetas */
.single-product .woocommerce-product-gallery .flex-direction-nav{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}