<style>
/* ===== Bloque principal aislado ===== */
.also-purchased-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 20px auto;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

/* ===== Contenedor del carrusel ===== */
.also-purchased {
  background: #fff;
  border-radius: 10px;
  padding: 16px 0 24px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  overflow: hidden;
  max-width: 100%;
}

.also-purchased h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 20px 15px;
  color: #111;
}

/* ===== Carrusel ===== */
.ap-viewport {
  overflow: hidden;
  position: relative;
  padding: 0 40px;
}

.ap-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 10px;
  box-sizing: border-box;
}
/* Centrado del carrusel cuando hay pocos productos */
.ap-track.centered {
  justify-content: center;
  overflow-x: hidden; /* elimina el scroll innecesario */
}

.ap-track::-webkit-scrollbar { display: none; }

/* ===== Items ===== */
.ap-item {
  flex: 0 0 auto;
  width: 180px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
  transition: transform .2s;
  scroll-snap-align: start;
    padding: 10px 14px 12px;     /* ← respiración a izquierda/derecha */
  box-sizing: border-box;
}
.ap-item:hover { transform: translateY(-3px); }

.ap-item img {
  max-height: 220px;
  width: auto;
  margin: 10px auto;
  display: block;
}

/* Texto */
.ap-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  padding: 0 6px;
  line-height: 1.3em;
  min-height: calc(1.3em * 2);  /* asegura altura igual para todos */
}
.ap-name:hover { color: #000; }
.ap-price {
  font-weight:700;
  color:#0b57d0;
  margin:8px 0 12px;
}

/* Flechas */
.ap-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.9);
  border:1px solid #ccc;
  border-radius:50%;
  width:36px; height:36px;
  font-size:22px;
  color:#333;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
  transition:background .2s;
}
.ap-btn:hover { background:#fff; }
.ap-prev { left:8px; }
.ap-next { right:8px; }

@media(max-width:768px){
  .ap-item{width:160px;}
  .ap-viewport{padding:0 30px;}
  .ap-btn{width:30px;height:30px;font-size:18px;}
}
/* —— Estrellas bajo el título —— */
.ap-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 4px 0 2px;
  min-height: 18px; /* asegura altura uniforme */
}
.ap-stars i {
  font-size: 13px;
  color: #f4b400;
}
.ap-stars .ap-count {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
  text-decoration: none;
}
.ap-stars .ap-count:hover {
  text-decoration: underline;
}

/* Badge de “agotado / sin precio” */
.ap-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin: 8px 0 12px;
}
.ap-badge-out {
  background: #eee;
  color: #666;
  border: 1px solid #ddd;
}
/* Permitir clic en tarjetas agotadas */
.ap-item-out{
  pointer-events: auto !important;
}

.ap-item-out a{
  pointer-events: auto !important;
  cursor: pointer;
}

.ap-item-out:hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Solo desaturar la imagen (mantiene el blanco blanco) */
.ap-item-out .image-wrapper img,
.ap-item-out img {
  filter: grayscale(100%) !important;  /* o: saturate(0) */
  opacity: 1 !important;               /* asegúrate de no bajar opacidad */
}

/* Evitar zoom en estado agotado */
.ap-item-out:hover img {
  transform: none !important;
}

/* 3) Título en 2 líneas max (por si no lo tienes ya) */
.ap-name{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;     /* asegura misma altura del bloque de título */
  margin-top: 6px;
}

/* --- Precio: texto normal, sin pill --- */
.ap-price{
display: inline-block;    /* para mantener la vertical */
  padding:0;              /* sin acolchado */
  border:none;            /* sin borde */
  background:transparent; /* sin fondo */
  color:#111;          /* azul corporativo */
  font-weight:700;
  line-height:1.2;
  margin:8px 0 12px;      /* separación como antes */
}

/* Descuento delante del precio: mismo tamaño y en rojo */
.ap-price .ap-discount{
  color: #d40000;
  font-weight: 700;
  font-size: 1em;                 /* ← igual que el precio */
  line-height: 1;
  margin-right: .5em;             /* separación del precio */
  white-space: nowrap;
}

/* --- Badge/etiqueta de “sin precio / agotado” sigue como pill --- */
.ap-badge{
  display:inline-block;
  padding:7px 16px;
  border-radius:9999px;
  border:1px solid #ddd;
  background:#f3f3f3;
  color:#666;
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  margin:10px auto 14px;
}
.ap-badge-out{ background:#eee; color:#666; border-color:#ddd; }

/* La tarjeta debe ser el contenedor relativo */
.ap-item{
  position: relative; /* necesario para posicionar la cinta */
  overflow: hidden;   /* oculta el sobrante de la cinta */
}

/* Cinta de oferta (parallelogram) */
.ap-ribbon.parallelogram{
  background: linear-gradient(45deg,#ff0000,#d40000);
  color:#fff;
  font-size:14px;          /* un poco menor para tarjetas de 180px */
  font-weight:700;
  text-transform:uppercase;
  padding:8px 26px;
  width:160px;             /* ajustado al ancho de la tarjeta */
  text-align:center;

  position:absolute;
  top:10px;
  left:-46px;              /* negativo para el efecto “cinta” */
  transform:rotate(-45deg);
  box-shadow:0 4px 8px rgba(0,0,0,.2);
  z-index:99;
  display:block;
  pointer-events:none;     /* no bloquea clics en la imagen */
}

/* Cinta de NUEVO (verde) */
.ap-ribbon-new {
  position: absolute;
  right: -42px;
  background: linear-gradient(45deg,#00b04f,#008d3a);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 26px;
  width: 160px;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  z-index: 49; /* justo debajo de la oferta si coincidieran */
  display: block;
  pointer-events: none;
}


/* tamaño un pelín menor en móvil */
@media (max-width: 480px){
  .ap-ribbon.parallelogram{
    font-size:12px;
    padding:7px 22px;
    width:140px;
    left:-40px;
    top:8px;
  }
}

/* Forzamos 2 líneas con ellipsis en móvil */
@media (max-width: 600px) {
  .ap-name{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;  /* máximo 2 líneas */
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    line-height: 1.3em;                 /* igual que desktop */
    min-height: calc(1.3em * 2) !important; /* misma altura en todas */
    max-height: calc(1.3em * 2) !important;
    margin-top: 6px;
    padding: 0 6px;
  }
   .ap-btn{ 
    display: none !important;     /* oculta prev/next */
  }
  .ap-viewport{
    padding: 0 10px !important;   /* devolvemos espacio al carrusel */
  }
  .ap-track{
    -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
    scroll-snap-stop: always;          /* buen “encaje” al soltar */
  }
}

/* Quitar marco/box del módulo "also purchased" */
.also-purchased-wrapper .also-purchased{
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;         /* opcional: elimina el colchón exterior */
}

/* Ajuste del título para que no quede muy pegado al borde superior */
.also-purchased-wrapper .also-purchased h2{
  margin: 0 0 12px !important;   /* arriba 0, abajo 12px */
}

/* Más “aire” para que las flechas no queden pegadas al borde */
.ap-viewport{
  padding: 0 80px;                 /* antes 40px: deja hueco a izq/der */
}

/* Botones más visibles */
.ap-btn{
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #fff;               /* fondo sólido */
  border: 2px solid #c7ccd6;      /* borde más marcado */
  color: #1f2937;                 /* icono más oscuro */
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  z-index: 20;                    /* por encima de las tarjetas */
  opacity: .98;
}

/* Separación respecto a los laterales */
.ap-prev{ left: 10px; }
.ap-next{ right: 10px; }

/* Hover/active para mejor feedback */
.ap-btn:hover{
  background: #111;
  border-color: #111;
  color: #fff;
}
.ap-btn:active{
  transform: translateY(-50%) scale(.96);
}

/* Mobile: un poco más pequeños pero igualmente visibles */
@media (max-width: 768px){
  .ap-viewport{ padding: 0 48px; }
  .ap-btn{
    width: 38px;
    height: 38px;
    border-width: 1.5px;
  }
  .ap-prev{ left: 12px; }
  .ap-next{ right: 12px; }
}

/* etiqueta “(xx €/l)” */
.per-liter-qty { margin-left: 8px; white-space: nowrap; }

/* línea de recomendado: mismo color, sin negrita */
.productSpecialPrice4.ap-recommended {
  font-size: 13px;
  color: #565454;      /* tono gris, cambia si prefieres otro */
  font-weight: 400; /* sin negrita */
  margin-top: 4px;
  line-height: 1.2;
}

.productSpecialPrice4.ap-recommended .ap-reco-del {
  color: inherit;          /* mismo color que el texto “Recomendado” */
  text-decoration: line-through;
  font-weight: 400;        /* sin negrita */
}

/* Agotado: sin pastilla, solo texto */
.also-purchased .ap-badge,
.also-purchased .ap-badge-out{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #565454 !important;        /* tono gris */
  font-weight: 600;               /* si lo quieres normal: 400 */
  font-size: 12px;
  line-height: 1.9;
  display: block;
  margin: 6px 0 10px;             /* separaciones suaves */
  text-align: center;
}

/* ==========================
   🏷️ Ribbons Limited / Collectors - Versión corregida
   ========================== */

/* La tarjeta es el contexto principal */
.ap-item {
  position: relative;
  overflow: hidden;
}

/* --- Ribbons dentro del contenedor de imagen --- */
.ribbon {
  position: absolute;
  top: 10px;                       /* dentro del bloque de imagen */
  left: 10px;
  z-index: 5;
  width: 4.1rem;
  height: 4.1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.8rem;
  pointer-events: none;
}

.ribbon--limited {
  background-image: url('../images/ribbon.svg');
  font-size: 0.6rem;
}

.ribbon--collectors {
  background-image: url('../images/ribbonc.svg');
  font-size: 0.5rem;
}

/* Adaptación móvil */
@media (max-width: 600px) {
  .ribbon {
    width: 3rem;
    height: 3rem;
    top: 6px;
    left: 6px;
  }
}


.ap-track.centered { justify-content: center; overflow-x: hidden; }

/* Ribbon flota totalmente, sin ocupar espacio de imagen */
.ap-item > a:first-child .ribbon {
  position: absolute !important;
  inset: auto auto auto auto; /* resetea */
  top: 10px !important;
  left: 10px !important;
  z-index: 10;
  width: 4.1rem;
  height: 4.1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.8rem;
  pointer-events: none;
  isolation: isolate; /* ← evita mezcla de capas */
}

/* Ribbon no altera el flujo del contenedor */
.ap-item > a:first-child .ribbon::before,
.ap-item > a:first-child .ribbon::after {
  content: "";
  display: none;
}

/* Ajuste móvil */
@media (max-width: 600px) {
  .ap-item > a:first-child .ribbon {
    width: 3rem;
    height: 3rem;
    top: 6px;
    left: 6px;
  }
}

/* Contenedor de imagen: relación 3/4 (mejor para botellas) */
.ap-item > a:first-child{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  aspect-ratio: 3 / 4;     /* antes 1/1: quedaba corto para botellas */
  height: auto;            /* fluye con el ancho */
  min-height: 220px;       /* seguridad en pantallas chicas */
  padding: 10px;           /* aire para que no “toque” arriba/abajo */
  box-sizing: border-box;
  overflow: hidden;        /* mantiene limpio el layout */
  background: #fff;
}

/* Imagen contenida, nunca recortada */
.ap-item > a:first-child img{
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;        /* el alto lo da el contenedor */
  width: auto;
  height: auto;
  object-fit: contain;     /* encaje proporcional */
  background:#fff;
  transition: transform .25s ease;
}

/* Hover suave (opcional) */
.ap-item:hover > a:first-child img{ transform: scale(1.03); }

/* Móviles — altura dinámica sin recorte */
@media (max-width: 600px) {
  .ap-item > a:first-child {
    aspect-ratio: auto;       /* ← permite altura natural */
    min-height: unset;
    height: auto;
    padding: 6px;
  }

  .ap-item > a:first-child img {
    width: auto;
    max-width: 100%;
    max-height: 240px;         /* límite visual, no fijo */
    object-fit: contain;       /* evita cortes */
  }
}

</style>